CSS 响应式表格
响应式表格
如果屏幕太小而无法显示全部内容,响应式表格将显示水平滚动条:
名 | 姓 | 积分 | 积分 | 积分 | 积分 | 积分 | 积分 | 积分 | 积分 | 积分 | 积分 | 积分 | 积分 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
吉尔 | 史密斯 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
前夕 | 杰克逊 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
亚当 | 约翰逊 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
添加容器元素(如<div> ) 和 overflow-x:auto
周围<table>元素以使其具有响应性:
笔记: 在 OS X Lion(在 Mac 上)中,滚动条默认是隐藏的,只有在使用时才显示(即使设置了“overflow:scroll”)。
更多示例
做一张漂亮的桌子
此示例演示了如何创建一个精美的表格。
设置表格标题的位置
此示例演示如何定位表格标题。
CSS 表格属性
财产 | 描述 |
---|---|
边界 | 在一个声明中设置所有边框属性 |
边界折叠 | 规定表格边框是否应折叠 |
边框间距 | 指定相邻单元格边框之间的距离 |
标题侧 | 规定表格标题的位置 |
空单元格 | 指定是否在表格中的空单元格上显示边框和背景 |
表格布局 | 设置表格使用的布局算法 |