响应式表格

创建于 2024-12-03 / 25

字体： [默认] [大] [更大]

了解如何创建响应式表格。

如果屏幕太小而无法显示完整内容，响应式表格将显示水平滚动条。调整浏览器窗口大小看效果:

First Name	Last Name	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points
Jill	Smith	50	50	50	50	50	50	50	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	94	94	94	94	94	94	94
Adam	Johnson	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67

要创建响应式表格，请在 <table> 周围添加一个带有 overflow-x:auto 的容器元素:

<div style="overflow-x:auto;">
<table>
...
</table>
</div>
亲自试一试 »

注释:在 OS X Lion（在 Mac 上）中，滚动条默认隐藏，仅在使用时显示（即使设置了 "overflow:scroll" 或 auto）。

提示:转到我们的CSS 表格教程，了解更多关于如何设置表格样式的信息。

0 人点赞过