时间戳

首页 > 解决方案 > HTML 表格宽度按比例设置

html - HTML 表格宽度按比例设置

问题描述

我有一个固定布局的表格，有两列。如果我只设置一列的宽度，事情就如预期的那样（至少我预期的那样）。

但是，如果我指定两列的宽度，单元格开始按比例划分自身。

table {
  table-layout: fixed;
  width: 120px;
  border-collapse: collapse;
}

td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0;
}

td:first-child {
  width: 5%;
}

td:nth-child(2) {
  width: 2%;
}
<table>
    <tr>
      <td>Ed</td>
      <td>Wood</td>
    </tr>
    <tr>
      <td>Albert</td>
      <td>Schweitzer</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Fonda</td>
    </tr>
    <tr>
      <td>William</td>
      <td>Shakespeare</td>
    </tr>
  </table>

我的意图是让第一列占据行宽的 5%（120 像素），第二列占据行宽的 2%。但是，第一个占行宽的 5/7，第二个占行宽的 2/7。

是否有一些规范详细说明了这种行为？

标签： htmlcss

解决方案

正如 Itay 所提到的，总宽度必须与桌子的宽度相匹配。当您设置一列的宽度时，唯一发生的事情是第一列占 5%，其他列占剩余的 95%，如果您将宽度添加到所有列，它们会逐个拆分空间，直到达到 100%。

你可以得到你想要达到的一种方法是有一个像这样的空列

table {
  table-layout: fixed;
  width: 120px;
  border-collapse: collapse;
  background: whitesmoke;
}

td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0;
}

td:first-child {
  width: 5%;
}

td:nth-child(2) {
  width: 2%;
}

td:last-child {
  width: auto;
}
<table>
  <tr>
    <td>Ed</td>
    <td>Wood</td>
    <td></td>
  </tr>
  <tr>
    <td>Albert</td>
    <td>Schweitzer</td>
    <td></td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Fonda</td>
    <td></td>
  </tr>
  <tr>
    <td>William</td>
    <td>Shakespeare</td>
    <td></td>
  </tr>
</table>

这样，空列将占用剩余空间，并让您的其他列具有您指定的宽度。如果您确实决定希望行跨越表格的整个宽度，width: auto则将为 0 并且不应该给您带来任何问题。

推荐阅读