html - 单元格左对齐且右侧有额外空间的表格

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>