表格的单元格左对齐，右侧有多余空间

Question

我想让表格的单元格保持对齐，但同时要自动调整。

例：

 thead td { background-color: yellow; } td { border:1px solid #000; } 

 <br/> <p> First table </p> <br/> <table style="width: 100%;"> <thead> <tr> <td>Title 1</td> <td>Title 2</td> <td>Title 3</td> </tr> </thead> <tr> <td class="block">First column with some additional text (blah blah blah blah blah)</td> <td class="block">Second column</td> <td class="block">Third column</td> </tr> </table> <br/> <p> Second table </p> <br/> <table style="width: 100%;"> <thead> <tr> <td>Title 1</td> <td>Title 2</td> <td>Title 3</td> </tr> </thead> <tr> <td class="block">First column</td> <td class="block">Second column</td> <td class="block">Third column</td> </tr> </table> 

在第二张表上，我们清楚地看到每个像元的宽度相等。

这不是我想要的。

我想让每个单元格并排而又没有多余的空间。 右边应该有多余的空间。

编辑：我想要的图像：

Answer 1

编辑：如果您不希望在列中使用多行

white-space:nowrap; in `td` css

在CSS中使用:nth-last-child使其宽度为100％

 thead td { background-color: yellow; } td { border:1px solid #000; } thead td:nth-last-child(1){ width:100%; } 

 <table style="width: 100%;"> <thead> <tr> <td>Title 1</td> <td>Title 2</td> <td>Title 3</td> </tr> </thead> <tr> <td class="block">First column </td> <td class="block">Second column</td> <td class="block">Third column</td> </tr> </table> 

Answer 2

尽力帮助

 thead td { background-color: yellow; } td { border:1px solid #000; } thead td:last-child{ width:100%; } 

 <br/> <p> First table </p> <br/> <table style="width: 100%;"> <thead> <tr> <td>Title 1</td> <td>Title 2</td> <td>Title 3</td> </tr> </thead> <tr> <td class="block">First column with some additional text (blah blah blah blah blah)</td> <td class="block">Second column</td> <td class="block">Third column</td> </tr> </table> <br/> <p> Second table </p> <br/> <table style="width: 100%;"> <thead> <tr> <td>Title 1</td> <td>Title 2</td> <td>Title 3</td> </tr> </thead> <tr> <td class="block">First column</td> <td class="block">Second column</td> <td class="block">Third column</td> </tr> </table> 

我已经添加了一些CSS

thead td:last-child{
  width:100%;
}

Answer 3

你的意思是那样吗？

<table style="width: 100%;">
<thead>
  <tr>
    <td style="width: 150px;">Title 1</td>
    <td style="width: 150px;">Title 2</td>
    <td>Title 3</td>
  </tr>
</thead>
<tr>
    <td class="block">First column</td>
    <td class="block">Second column</td>
    <td class="block">Third column</td>
</tr>
</table>