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%;
    }

这将确保文本包装仍然有效，同时在空间可用时仍然填充表。