th css colspan rowspan

### CSS 中 `colspan` 和 `rowspan` 的用法 #### 表格中的单元格扩展 在 HTML 表格中，`colspan` 属性用于定义某个单元格跨越多列，而 `rowspan` 属性则用于定义某个单元格跨越多行。这种功能可以用来创建更复杂的表格布局。 #### 使用 `colspan` 当需要让一个单元格占据多个水平方向上的列时，可以通过设置 `<td>` 或 `<th>` 标签的 `colspan` 属性来实现。例如： ```html <table border="1"> <tr> <td colspan="2">跨两列</td> <!-- 这个单元格会横跨两个列 --> </tr> <tr> <td>1-1</td> <td>1-2</td> </tr> </table> ``` 上述代码展示了如何通过 `colspan` 让第一个单元格覆盖两列[^1]。 #### 使用 `rowspan` 如果希望某一个单元格能够垂直延伸并占用多行，则可以使用 `rowspan` 属性。下面是一个例子： ```html <table border="1"> <tr> <td rowspan="2">跨两行</td> <!-- 此单元格会在竖直方向上占两行 --> <td>1-2</td> </tr> <tr> <td>2-2</td> </tr> </table> ``` 在这个实例里，左侧的第一个单元格因为设置了 `rowspan="2"` 而占据了两行的高度。 #### 结合样式调整视觉效果 为了使带有 `colspan` 或者 `rowspan` 的表格看起来更加美观整齐，通常还会配合一些简单的 CSS 来优化其外观。比如给所有的边框加上统一的颜色以及去掉默认间隙等操作都可以提升用户体验: ```css <style> table { width: 50%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: center; } .wide-cell { background-color: lightblue; } </style> <table> <thead> <tr> <th>Name</th><th>Age</th><th>Hobby</th> </tr> </thead> <tbody> <tr> <td class="wide-cell" rowspan="2">Alice</td><!-- Alice's name spans two rows --> <td>25</td> <td>Gardening</td> </tr> <tr> <td>Reading</td> </tr> <tr> <td colspan="3" style="background-color:pink;">This cell spans all three columns.</td> </tr> </tbody> </table> ``` 这里不仅应用了之前提到的基础属性，还加入了额外的类名 `.wide-cell`, 并且利用颜色区分不同的区域[^2]。 #### 响应式设计下的注意事项 对于现代网页开发来说，在移动设备或者屏幕尺寸较小的情况下保持良好的可读性和可用性非常重要。因此有时可能还需要考虑固定头部滚动主体内容的情况。这可以通过纯 CSS 实现如下所示的效果[^3]: ```css .scrollable-table-container { max-height: 200px; /* 设置容器最大高度 */ overflow-y: auto; /* 添加纵向滚动条 */ } .fixed-header-footer-table tbody tr:first-child, .fixed-header-footer-table tfoot tr:last-child { position: sticky; top: 0; /* 将顶部冻结 */ } ``` 以上方法可以帮助解决数据量大但是展示空间有限的问题。