CSS与HTML表格布局：灵活掌控列宽
本文演示如何使用CSS和HTML创建灵活的三列表格布局，满足不同列宽需求，例如三列均分、指定列宽以及剩余宽度自适应等。
实现方法：
我们无需使用colspan属性来合并单元格。通过CSS的width属性和百分比，可以更灵活地控制列宽。
立即学习“前端免费学习笔记（深入）”；
以下代码展示了如何实现：
| 列 1 | 列 2 | 列 3 |
table {
width: 100%; /* 表格占据父容器的全部宽度 */
}
/* 三列均分 */
td {
width: 33.33%; /* 每列宽度约为总宽度的三分之一 */
text-align: center; /* 文字居中 */
border: 1px solid #ccc; /* 添加边框，方便观察 */
}
/* 第二列占三分之二，第三列自适应剩余宽度 */
/* 以下代码块替代上面td样式，实现第二种布局 */
/*
td:nth-child(1) {
width: 33.33%;
}
td:nth-child(2) {
width: 66.66%;
}
td:nth-child(3) {
width: auto; /* 自动适应剩余宽度 */
}
*/
通过以上CSS代码，我们可以轻松实现两种布局：
- 第一种布局： 三列宽度均等。
- 第二种布局： 第一列占三分之一，第二列占三分之二，第三列自动适应剩余空间。 (注释部分代码展示了第二种布局的实现)
通过调整td或td:nth-child()选择器的width属性值，可以轻松实现各种列宽比例的表格布局，无需使用colspan属性。 这种方法更灵活，也更易于维护。
