标签：
<table><!-- 表格 --> <caption><!-- 表格标题 --> this is table title! </caption> <tbody> <tr><!-- 行 --> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody> </table>
1、不要给table,th,td以外的表格标签加样式；table 的标签基本特性是: display:table;
2、单元格默认平分table 的宽度；表格可以嵌套。
3、th里面的内容默认加粗并且左右上下居中显示
4、td里面的内容默认上下居中左右居左显示
5、 table 决定了整个表格的宽度；
6、table里面的单元格宽度会被转换成百分比；
7、 表格里面的每一列必须有宽度；
8、表格同一竖列继承最大宽度；
9、表格同行继承最大高度；
th,td{padding:0;}/*表格其它无默认样式，只有单元格有padding*/ table{border-collapse:collapse;}/*合并边框间距*/ /* table css reset */ th,td{border:1px solid black; height:50px; width:100px;} table{width:500px;} td{border-spacing: 10px 30px;} /*边框间距，10像素水平间距，30像素垂直边距，但不支持ie6*/ <td colspan="2" rowspan="2">单元格</td> /* colspan 属性规定单元格可横跨的列数。 rowspan 属性规定单元格可横跨的行数。*/ tr:nth-child(2n){background-color: #fff;} /*偶数行添加背景颜色，但只支持ie9+*/
<body> <div id="tablecontainer"><!-- 表格主体 --> <div id="tablerow"><!-- 行 --> <div id="main"><!-- 单元格 --> .... </div> <div id="sidebar"><!-- 单元格 --> .... </div> </div> </div> </body>
#tablecontainer {
display: table;
border-spacing: 10px;/* 这和外边距创建的空间不会折叠 */
}
#tablerow {
display:table-row;
}
#main {
display:table-cell;
}
#sidebar {
display:table-cell;
}
2016-06-15 22:15:04
标签：
原文地址：http://www.cnblogs.com/langlang149/p/5589000.html
