定寬時 <td> 擴展以適合其內容，另一個 <td> 相同寬度的s也按比例擴展（使用CSS）

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>