Question

我有一个宽度为1280px的父容器，溢出设置为auto。该元素的子级是一个包含14列的表，我希望每个列都适合将内容设置为nowrap的空白。这会将表拉伸到比父容器的宽度还要宽的位置，并显示滚动条。但是我希望一列的固定宽度为400px，并将空白设置为normal，这样，如果文本内容的宽度大于400px，则将自动换行。我该如何实现？我玩过表布局：固定的，但是如果不对表的宽度进行硬编码，就无法设置列的宽度。

Answer 1

我看到的最简单的方法是重置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行为的一部分，因此您可以为其设置大小或设置min或max size。（这是几年前模仿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>

Answer 2

如果该列具有ID，则可以尝试

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

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

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

2 个答案: