CSS 响应式表格
响应式表格
响应式表格将在屏幕太小而无法显示完整内容时显示水平滚动条。
名字 | 姓氏 | 分数 | 分数 | 分数 | 分数 | 分数 | 分数 | 分数 | 分数 | 分数 | 分数 | 分数 | 分数 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | Smith | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
Eve | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Adam | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
在 <table> 元素周围添加一个容器元素(例如 <div>),并设置 overflow-x:auto;
即可使其响应式。
注意: 在 OS X Lion(Mac 上),滚动条默认是隐藏的,只有在使用时才会显示(即使设置了“overflow:scroll”)。
更多示例
制作一个花哨的表格
本示例演示如何创建花哨的表格。
设置表格标题的位置
本示例演示如何设置表格标题的位置。
CSS 表格属性
属性 | 描述 |
---|---|
border | 在一个声明中设置所有边框属性。 |
border-collapse | 指定表格边框是否应被合并。 |
border-spacing | 指定相邻单元格边框之间的距离。 |
caption-side | 指定表格标题的位置。 |
empty-cells | 指定是否在表格的空单元格中显示边框和背景。 |
table-layout | 指定用于表格的布局算法。 |