CSS3 表格

边距间距

border-spacing

<table border="1" style="width:100px; height:100px; border-spacing: 5px;">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

效果


边距合并

border-spacing

<table border="1" style="width:100px; height:100px; border-collapse: collapse;">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

效果


垂直高度

vertical-align

<table border="1" style="width: 100px; height: 100px; border-collapse: collapse; text-align: center; vertical-align: middle;">
<tr><td>简</td><td>明</td></tr>
<tr><td>教</td><td>程</td></tr>
</table>

<!-- 文本的水平位置使用 “text-align” 而垂直位置使用 “line-height” 行高 -->
<!-- 由于表格是固定行高不支持 “line-height” ,所以增加了一个专属的垂直属性 “vertical-align” top / middle / bottom -->

效果


比例分布

table-layout

<table border="1" style="width: 200px;  border-collapse: collapse; table-layout: auto;">
<tr><td> Hello </td><td> ~ </td></tr>
</table>
<br>
<table border="1" style="width: 200px;  border-collapse: collapse; table-layout: fixed;">
<tr><td> Hello </td><td> ~ </td></tr>
</table>

<!-- 表格默认下会根据内容的大小动态分配空间 -->
<!-- table-layout: fixed; 等比例大小 -->

效果

Hello ~

Hello ~
CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 单位 CSS3 字体 CSS3 文本 CSS3 光标 CSS3 盒子模型 CSS3 边框 CSS3 边距 CSS3 列表 CSS3 表格 CSS3 背景 CSS3 效果 CSS3 浮动 CSS3 定位 CSS3 响应式 CSS3 Columns CSS3 Flex