Это код:
, он хорошо работает в Firefox и Opera, но не в IE:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
border: 1px solid gray;
line-height: 120%;
margin: 5px;
width:100%;
}
h1#header,h5#footer {
background-color: gray;
clear: both;
color: white;
padding: 0.5em;
margin: 0;
}
div#menu {
width: 190px;
float: left;
}
div#body {
margin-left: 200px;
padding: 2px;
border-left: 2px gray solid;
}
table {
border: 1px solid #CEDCED;
border-collapse: collapse;
margin: 2px auto;
width: 100%;
}
th {
border: 2px ridge maroon;
background-color: maroon;
color: white;
padding: 2px;
}
tr {
background-color: white;
margin: 1px;
}
</style>
<script type="text/javascript">
function setTableWidth(){
alert(document.getElementById('tab').offsetWidth);
}
</script>
</head>
<body onload=setTableWidth()>
<h1 id="header">Header</h1>
<div id="menu">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
</ul>
</div>
<div id="body">
<table id="tab">
<tr>
<th>name</th>
<th>age</th>
<th>email</th>
</tr>
<tr>
<td>test</td>
<td>100</td>
<td>xx</td>
</tr>
</table>
</div>
<!-- foot -->
<h5 id="footer">Copyright xxx</h5>
</body>
</html>
Я добавил js кпосмотрите ширину таблицы, если вы протестируете ее в браузере, вы получите размер, следующий мой:
Firefox: 1062
IE: 1521.
Итак, мне интересно, почему?
На мой взгляд, результат Firefox нормальный, почему таблица занимает больше ширины своего родителя (тело div # в примере)