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

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 

使用:nth-last-child在你的CSS要实现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

你的意思是这样吗？

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

Answer 3

试试吧帮助完整

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