Непонятные причуды стилей

animegirl · May 10, 2012

Вот код, не могу понять вроде всё верно, зелёная ячейка 800 пикселей, внутри таблица, ширина 770 бордеры 5 отступы 10, вместе должны заполнить все 800 пикселей, но по непонятным причинам слево 10 отступ, справа 20, визуально они сравниваются, если ширину увеличить до 780 пикселей, где логика?


<!DOCTYPE html>
<html>
	<head>
		<title>aaa</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="stylesheet" type="text/css" href="css/css.css">
		<style>
BODY {
	margin:0px;
	border:0px;
	padding:0px;
	background-color:#D4A984!important;
	font-family:'Lucida Sans Unicode','Arial';
	font-size:16px;
}

FORM {
	margin:0px;
	border:0px;
	padding:0px;
}

TABLE, TBODY, TR, TD {
	margin:0px;
	border:0px;
	padding:0px;
	border-collapse:collapse;
	border-spacing:0px;
	vertical-align:top;
}

A {
	color:inherit;
	text-decoration:none;
}

#main_table {
	margin:auto;
	width:1000px;
	height:100%;
	background-color:green!important;
}

#header_td {
	width:100%;
	height:100px;
	background-color:#A86A35!important;
	border-bottom:10px solid #6D3C11;
}

#middle_tr {
	background-color:#D49967!important;	
}

#bottom_td {
	width:100%;
	height:50px;
	background-color:#A86A35!important;
	border-top:10px solid #6D3C11;
	text-align:center;
}

#menu_td {
	width:200px!important;
	background-color:red!important;
}

#main_td {
	width:800px;
	background-color:green!important;
}

#users_table, #users_table tr, #users_table tr td {
border: black 3px solid;
}

#users_table {
	margin:10px 10px 10px 10px;
	width:770px;
	border:5px solid #6D3C11!important;
	background-color:#A86A35!important;
}
		</style>
	</head>
	<body>
		<table id="main_table">
			<tr>
				<td id="header_td" colspan="2">zzz
				</td>
			</tr>
			<tr id="middle_tr">
				<td id="menu_td">xxx</td>
				<td id="main_td">
			<table id="users_table">
				<tr>
					<td>От кого</td><td>Тема</td><td>Получено</td>
				</tr>
</table>
</td>
			</tr>
			<tr>
				<td id="bottom_td" colspan="2">yyy
				</td>
			</tr>
		</table>
	</body>
</html>

SelenIT · May 10, 2012

Вероятно, логика (странная, но всё же) в одной подробности этого раздела спецификации:

Ширина таблицы (т.е. любого элемента с display:table — прим. перев.) — это расстояние от левой внутренней границы padding-а до правой внутренней границы padding-а (включая border-spacing между ячейками, но исключая padding и border).
Однако, в HTML и XHTML1 ширина элемента <table> — расстояние от левой границы border-a до правой границы border-а (это исторически сложившееся исключение — прим. перев.).
Примечание: в CSS3 это необычное требование будет определено в терминах таблиц стилей браузера и свойства 'box-sizing'.

Sign In

Непонятные причуды стилей

Question

animegirl

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information