表单元左对齐,右侧有额外的空间
问题描述:
我希望我的表的单元格左对齐,但同时自动调整。表单元左对齐,右侧有额外的空间
实施例:
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>
在第二表中,我们清楚地看到,每个单元具有相同的宽度。
这不是我想要的。
我想让每个单元并排放置,而没有额外的空间。 额外的空间应该在右边。
编辑:我想要什么的图像:
答
编辑:如果你不想在列多线使用
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>
+0
这正是我想要的。谢谢阿卜杜勒。 – Bronzato
+0
你可以使用白色空间:nowrap;在td中避免列中的多行文本 –
答
你的意思是这样吗?
<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>
答
试试吧帮助完整
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%;
}
你找谁细胞无额外的空间? –
@RaJeshRiJo是的,额外的空间应该在我的问题要求的表的右侧。 – Bronzato
只是删除style = width:100%;通过删除'style = width:100%'来创建表格标签 –