...
< table >
< tr >
< td >
< td >
< td >
</ tr >
< tr >
< td >
< td >
< td >
</ tr >
< tr >
< td >
< td >
< td >
</ tr >
...
< table >
< tr >
< td >
< td >
< td >
</ tr >
< tr >
< td >
< td >
< td >
</ tr >
< tr >
< td >
< td >
< td >
</ tr >
...
上述 HTML 实现了一个3x3的表格,如何指定每列的宽度,方法有很多:
- 为每一个 td 标签都指定宽度
- 为每一个 td 标签都指定相应的 css 样式
- 只为第一行的每一个 td 标签指定宽度
- 指定 thead 中每一个 th 的宽度
最近又发现了一种,即使用 colgroup 子标签。用了这么多年 table 才发现有这个标签,惭愧
修改代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
...
< table >
< colgroup >
< col width ="100px" />
< col width ="200px" />
< col width ="300px" />
</ colgroup >
< tbody >
< tr >
< td >
< td >
< td >
</ tr >
< tr >
< td >
< td >
< td >
</ tr >
< tr >
< td >
< td >
< td >
</ tr >
< tbody >
</ table >
...
< table >
< colgroup >
< col width ="100px" />
< col width ="200px" />
< col width ="300px" />
</ colgroup >
< tbody >
< tr >
< td >
< td >
< td >
</ tr >
< tr >
< td >
< td >
< td >
</ tr >
< tr >
< td >
< td >
< td >
</ tr >
< tbody >
</ table >
...