码农教程 - 一技在手,衣食无忧! tools

目录

如何操作 - 响应式表格

❮ 上一节 下一节 ❯

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

响应表

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

名 姓 积分 积分 积分 积分 积分 积分 积分 积分 积分 积分 积分 积分 积分 积分 积分 积分 积分 积分 积分
吉尔 史密斯 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50
前夕 杰克逊 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94
亚当 约翰逊 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67

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

示例

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

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

提示：去我们的CSS 表格教程了解有关如何设置表格样式的更多信息。


❮ 上一节 下一节 ❯