How TO - 响应式表格

❮ 上一页下一页 ❯

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

响应式表格

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

名字	姓氏	分数	分数	分数	分数	分数	分数	分数	分数	分数	分数	分数	分数	分数	分数	分数	分数	分数	分数	分数
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 表格教程，了解更多关于如何设置表格样式的信息。

❮ 上一页下一页 ❯

W3schools 学习路径

跟踪您的进度 - 免费！

Get Certified

拾色器

colorpicker

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业，请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误，或想提出建议，请发送电子邮件给我们
help@w3schools.com

热门教程

HTML 教程
CSS 教程
JavaScript 教程
操作方法教程
SQL 教程
Python 教程
W3.CSS 教程
Bootstrap 教程
PHP 教程
Java 教程
C++ 教程
jQuery 教程

热门参考

HTML 参考
CSS 参考
JavaScript 参考
SQL 参考
Python 参考
W3.CSS 参考
Bootstrap 参考
PHP 参考
HTML 颜色
Java 参考
Angular 参考
jQuery 参考

热门示例

HTML 示例
CSS 示例
JavaScript 示例
操作方法示例
SQL 示例
Python 示例
W3.CSS 示例
Bootstrap 示例
PHP 示例
Java 示例
XML 示例
jQuery 示例

获取证书

HTML 证书
CSS 证书
JavaScript 证书
前端证书
SQL 证书
Python 证书
PHP 证书
jQuery 证书
Java 证书
C++ 证书
C# 证书
XML 证书

论坛关于学院

W3Schools 经过优化，旨在方便学习和培训。示例可能经过简化，以提高阅读和学习体验。教程、参考资料和示例会不断审查，以避免错误，但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款、Cookie 和隐私政策。

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持。