表格尺寸
width/height 宽高、百分比与固定像素、列宽控制
表格尺寸
控制表格和列的宽度让排版更整齐——可以用像素或百分比。
学完本章你将： 掌握 width/height、百分比自适应、列宽控制。
表格宽度
html
<style>
/* 固定像素 */
table { width: 600px; }
/* 百分比（推荐——响应式） */
table { width: 100%; }
/* 最大宽度限制 */
table { max-width: 800px; }
</style>列宽控制
html
<table style="width: 100%;">
<!-- colgroup 控制整列宽度 -->
<colgroup>
<col style="width: 30%;"> <!-- 第一列 30% -->
<col style="width: 40%;"> <!-- 第二列 40% -->
<col style="width: 30%;"> <!-- 第三列 30% -->
</colgroup>
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
</tr>
<tr>
<td>小明</td>
<td>xm@test.com</td>
<td>138xxxx</td>
</tr>
</table>固定行高
html
<style>
th, td {
height: 50px; /* 固定高度 */
/* height: auto; 自适应内容 */
vertical-align: middle; /* 垂直居中 */
/* vertical-align: top; 顶部对齐 */
/* vertical-align: bottom; 底部对齐 */
}
</style>