Question

假设我非常在意比例外观，并且希望我桌的所有<td>都具有完全相同的宽度。我将指定宽度如下：

<table>
  <tr>
    <td width="25%">
    <td width="25%">
    <td width="25%">
    <td width="25%">
  </tr>
</table>

我们假设表格宽度为100px，因此每个<td>的宽度应为25px。

现在，不幸的是，<td>中有一个很长的单词，迫使宽度超出其分配的25％。假设这个词强迫单个<td>占用40px。

发生这种情况时，CSS中是否有一种方法可以使所有<td>都具有宽度40px？因此，满足我所有<td>具有相同宽度的要求吗？

其他注意事项

如果屏幕宽度以100px开始，并且所有<td>必须推到40px，那么在这种情况下，我希望表格水平滚动，因此表格的全宽为160px
鉴于上述要求，word-break:break-word不能解决整体问题，因为将其应用于表将迫使<td>保持其25px的宽度。另外也不喜欢这种解决方案，因为有时单词会以难以阅读的方式分解

Answer 1

您可以使用网格布局。

table {
  /* Prevent table width from shrinking */
  width: max-content;
}

tr {
  display: grid;
  /* Use 4 columns of equal width */
  grid-template-columns: repeat(4, 1fr);
}

td {
  padding: .2em;
  outline: 1px solid;
}

<table>
  <tr>
    <td>abracadabra
    <td>b
    <td>c
    <td>d
  </tr>
</table>

当固定宽度的<td>扩展以适合其内容时，相同宽度的其他<td>也将按比例扩展（使用CSS）

1 个答案: