正在加载...

HTML 表格尺寸

表格可以铺满内容栏，也可以像价目卡一样保持紧凑。边框课教你如何画出网格线之后，本课给盒子定尺寸：用 CSS（width、max-width、padding、可选列宽）让表格同时适配数据和屏幕。表现留在 CSS；table / tr / th / td 仍承载语义。边框让网格可见，尺寸让网格舒适。

表格的「尺寸」指什么

尺寸不是一个数字。整张表相对父元素有宽度。单元格需要 padding，文字才有呼吸空间。列可以均分空间，也可以让标签列更宽。在手机上，坚持 1200px 的表格即使只有两列短数据也会强迫别扭的横向滚动。灵活做法——常见是 width: 100% 配合理的 max-width——让简单网格可读，而不假装 CSS 能取代诚实的 th/td 结构。

直接答案

在 table 上设置 width（例如 100%），并用 max-width 可选封顶（例如 480px 或 640px）。当某一列应占更多空间时，在 th/td 上提示列宽。优先用百分比和 max-width，避免在手机上溢出的巨大固定像素宽度。继续使用边框课的 border-collapse 与 padding，让尺寸与线条协同。用 class 限定规则，避免一个演示改掉整页每张表。

带列宽提示的灵活宽度

常见入门模式：表格在最大值内填满父元素，边框保持 collapsed，第一列给标签更大份额。

Flexible table width

html
HTML Code 
<style>
table.prices { width: 100%; max-width: 480px; border-collapse: collapse; }
table.prices th, table.prices td { padding: 8px; border: 1px solid #555; }
table.prices th:first-child, table.prices td:first-child { width: 60%; }
</style>
<table class="prices">
<tr><th>Plan</th><th>Price</th></tr>
<tr><td>Starter</td><td>0</td></tr>
<tr><td>Pro</td><td>9</td></tr>
</table>

阅读灵活示例

  • width: 100% 让表格使用可用内容宽度
  • max-width: 480px 防止在宽屏上变成巨型条带
  • border-collapse: collapse 避免尺寸与边框互相打架
  • padding: 8px 给每个单元格可读的内边距
  • :first-child { width: 60%; } 提示套餐名列应比价格列更宽
  • 用 class 限定（.prices）避免误改页上每张表

紧凑的 max-width 表格

有时你想要永不铺满全宽的小对比卡。更低的 max-width（封顶内仍用 width: 100%）让网格在桌面与手机上都干净。

Compact max-width table

html
HTML Code 
<style>
table.compact {
width: 100%;
max-width: 320px;
border-collapse: collapse;
}
table.compact th, table.compact td {
padding: 6px 10px;
border: 1px solid #444;
text-align: left;
}
</style>
<table class="compact">
<tr><th>Item</th><th>Stock</th></tr>
<tr><td>USB cable</td><td>14</td></tr>
<tr><td>Notebook</td><td>3</td></tr>
</table>

阅读紧凑示例

  • 同一灵活思路，更紧的 max-width 形成卡片足迹
  • 水平 padding（6px 10px）可与垂直不同，以更舒适
  • text-align: left 是可选表现——数字与文字共享小网格时有用
  • 仍不做布局表嵌套；你只是在给真实数据表定尺寸
  • 缩小浏览器：表格应随列收缩到内容极限，而不是默认强迫巨大滚动条

固定像素与灵活习惯

像 width: 1200px 这样的固定宽度在大显示器上可能好看，在手机上却很痛苦。若打印或稠密仪表盘需要最小值，从流动的 width 加 max-width 起步，或稍后再规划响应策略。对本课程的入门表格，灵活尺寸是默认好习惯。列的 width 百分比是提示——内容极长或不可断时浏览器可能调整，学习时保持单元格文字合理简短。当某列拒绝收缩时，先检查长 URL 或无空格单词，再责怪 max-width。

padding、列与 collapse 一起用

尺寸工作与边框课并肩。没有 padding，即使外宽完美，稠密单元格也显得挤。没有 collapse，宽度实验可能显得更厚或不均，因为分离边框吃掉额外空间。可选列提示（在 :first-child 单元格或特定 th 上的 width）在标签比数值更需要空间时引导浏览器。不要用尺寸 CSS 当借口丢掉 th 表头，或把整页重建成嵌套布局表——那个冲突已在 Tables 课解决。

在编辑器中练习

  1. 给练习表 width: 100% 和一个 max-width（试试 480px）。
  2. 给 th/td 加 padding（若仍有边框样式可复用）。
  3. 调整浏览器大小——确认简单两列表不会强迫无尽横向滚动。
  4. 可选：用 :first-child 或 class 加宽第一列。
  5. 用更紧的 max-width（如 320px）复制表格并比较足迹。
  6. 临时设 width: 1200px，感受手机痛苦，再删掉。
  7. 在已设宽度时切换 border-collapse，观察外尺寸手感变化。
  8. 在表下写一句：所选 max-width 及原因。

易犯错误

  • 固定 width: 1200px 的表格弄坏小屏
  • 没有 padding——稠密难读的单元格
  • 没有 border-collapse 却让边框与宽度打架
  • 全局 table { width: ... } 改掉页上每个演示
  • 指望列 width 提示压过极长不可断字符串
  • 再用表格尺寸假装整页布局列
  • 忘记 max-width，单靠 width: 100% 把三格小表拉满超宽屏

小结

  • 用 CSS width 与 max-width 给表格定尺寸
  • 用 padding 让单元格可读
  • 小屏优先灵活布局
  • 列宽提示可选，尽量用 class 限定
  • 保持边框 collapsed，让尺寸与线条协作
  • 结构在 HTML；尺寸在 CSS
  • 后续以表头为重点的课建立在已舒适适配视口的网格上

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
6
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程