table 样式详解

1.table 中css样式控制border 只能控制外边框，内边框需要写<table border="1">

2.table 会自动撑大，即使td 设置了 width和height这与div 是不同的

3.只有一个table的时候，高度自适应全屏

 <style type="text/css">table ,td,body{padding: 0;margin: 0;}html,body{height:100%;font-size:12px;}td {border:1px solid red;font-size: 12px;color: #000000;}#main{border:1px solid red;width:100%;height:100%;}#header{height:94px;border:1px solid red;}</style>
</head>
<body>
<table id="main"><tr><td id="header">我的顶部</td></tr><tr><td>我是主要内容</td></tr>
</table>
</body>

4.table可以为 td设置 border-radius 属性

5.多个元素的时候，最后一个元素高度要自适应全屏（高度计算时，table 的border无论设置多大都不影响，也就是说border是包含在计算的高度中的，这个与div不同）

 <style type="text/css">table, td, body{ padding:0; margin:0; }table{ border-collapse:collapse; }.he1{ width:100%; height:200px; background:black; }.he2{ width:100%; height:100px; background:red; }</style><script>$(document).ready(function () {var h1 = $(".he1").height();var h2 = $(".he2").height();$("#main").height($(window).height()-h1-h2);});</script>
</head>
<body>
<div class="he1"></div>
<div class="he2"></div>
<table id="main" border="5"><tr><td id="header">我的顶部</td></tr><tr><td>我是主要内容</td></tr>
</table>
</body>