表格中的单元格左对齐，右侧有额外的空间

Question

我希望我的桌子的单元格保持对齐，但同时自动调整。

实施例：

<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>

{{1}}

在第二个表格中，我们清楚地看到每个单元格的宽度相等。

这不是我想要的。

我希望每个细胞并排放置，两者之间没有多余空间。 额外的空间应该在右边。

编辑：我想要的图像：

Answer 1

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

white-space:nowrap; in `td` css

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>