HTML table 设置一个列宽，其余列适合内容，而 table 宽度设置为自动

Question

我有一个宽度为 1280 像素且溢出设置为自动的父容器。这个元素的子元素是一个有 14 列的 table，我希望每一列都适合 white-space 设置为 nowrap 的内容。这会将 table 拉伸到比父容器的宽度更宽，并且会显示一个滚动条。但我希望一列的宽度固定为 400px，并将 white-space 设置为 normal，以便文本内容在宽度超过 400px 时换行。我怎样才能做到这一点？我玩过 table-layout: fixed，但没有对 table 宽度进行硬编码，我无法设置列宽。

Answer 1

如果该列有一个 ID，那么可以试试这个

<!-- your code for table -->
<script>
    var i = document.getElementById("column-id");
    i.style.width = "400px";
    i.style.whiteSpace = "normal";
</script>

这就是我要尝试的方法，希望对您有所帮助。

Answer 2

我看到的最简单的方法是重置 display，因为它到处都是大约 white-space，但对于某处的一列或什至单个单元格，此列或单元格将至少是一行文字，应该不会太注意。

以下 3 个示例

table {
  table-layout:fixed;/* or not */
}
td {
  white-space:nowrap;
  border:solid;
  background:lightgreen;
}
table:first-of-type td:first-child,/* first example */
table + table  td:nth-child(2) ,/* second example , another column selected */
table + table + table   td:nth-child(5) /* third example, 2 columns BUT NOT side by side */{
  display:block;
  width:100px;
  white-space:normal;
  background:lightblue;
}

<table>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
</table>
<table>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
</table>
<table>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
</table>

显示为 block 的单元格不再是 table-layout 行为的一部分，因此您可以调整它的大小或设置最小或最大大小。（这是几年前模仿 flex 或 grid 的一种方式）

出于对部分损坏时 table-layout 行为的好奇心：

table,
td {
  border: solid;
}

td {
  padding: 0.5rem
}

.block {
  display: block;
}

.block+.block {
  margin-top: 3px;
}

<table>
  <tr>
    <td>cell</td>
    <td class="block"> cell turned into block</td>
    <td class="block"> cell turned into block</td>
    <td>cell</td>
    <td class="block"> cell turned into block</td>
    <td class="block"> cell turned into block</td>
    <td>cell</td>
  </tr>
</table>

HTML table 设置一个列宽，其余列适合内容，而 table 宽度设置为自动

HTML table set one column width while the rest of the columns fit the content while the table width is set to auto

html

css

responsive