HTML表最后td采取剩余寬度

Question

我有一張TR和2個TD的桌子。 我希望第一個TD根據其內容自動調整寬度，第二個TD使用寬度的其余部分。

這就是我所擁有的：

 <table style="width: 100%;"> <tr> <td>short content</td> <td>long content</td> </tr> </table> 

整個表格寬度是100％（我想要它），但我不知道如何調整TD寬度來實現我的目標。

Answer 1

你可以給第一個td一個小寬度，例如1px ，帶有white-space: nowrap;

 table { width: 100%; border-collapse: collapse; } td { border: 1px solid red; } td:first-child { width: 1px; white-space: nowrap; } 

 <table> <tr> <td>short content</td> <td>long content</td> </tr> </table> 

或者，給最后一個td一個大的寬度，例如100% 。

 table { width: 100%; border-collapse: collapse; } td { border: 1px solid red; } td:first-child { white-space: nowrap; } td:last-child { width: 100%; } 

 <table> <tr> <td>short content</td> <td>long content</td> </tr> </table> 

Answer 2

設置white-space: nowrap在除最后一個之外的所有單元格上，並給出最后一個100％寬度，為我工作：

    td:not(:last-child), th:not(:last-child) {
      white-space: nowrap;
    }

    td:last-child, th:last-child {
      width: 100%;
    }

這將確保文本包裝仍然有效，同時在空間可用時仍然填充表。