适合单元格宽度内容

给定下面的标记，我如何使用CSS强制一个单元格(列中的所有单元格)以适应其中内容的宽度，而不是拉伸(这是默认行为)?

td.block {
border: 1px solid black;
}
<table style="width: 100%;">
<tr>
<td class="block">this should stretch</td>
<td class="block">this should stretch</td>
<td class="block">this should be the content width</td>
</tr>
</table>

我意识到我可以硬编码宽度，但我宁愿不这样做，因为内容将在该列是动态的。

查看下面的图像，第一个图像是标记产生的结果。第二张图就是我想要的。

enter image description here

627092 次浏览
小开
最佳答案

我不确定我是否理解你的问题，但我会尝试一下:

td {
border: 1px solid #000;
}


tr td:last-child {
width: 1%;
white-space: nowrap;
}
<table style="width: 100%;">
<tr>
<td class="block">this should stretch</td>
<td class="block">this should stretch</td>
<td class="block">this should be the content width</td>
</tr>
</table>

小开

设置

max-width:100%;
white-space:nowrap;

会解决你的问题。

小开

根据我所能找到的所有规格，将CSS宽度设置为元素的1%或100%与父相关。虽然Blink渲染引擎(Chrome)和Gecko (Firefox)在写作的时候似乎可以很好地处理1%或100%(使列缩小或列填充可用空间)，但根据我能找到的所有CSS规范，它并不能保证正确地渲染它。

一种选择是用CSS4 flex divs替换表:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这适用于新的浏览器，即IE11+，见文章底部的表格。

小开

对我来说，这是最好的自动拟合和自动调整表和它的列(使用css !重要…除非你不能没有)

.myclass table {
table-layout: auto !important;
}


.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
width: auto !important;
}
不要为表或表列指定css宽度。 如果表格内容更大，它将超过屏幕大小。

小开

简单:

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>
小开

有很多方法可以做到这一点!

如果我错了请指正，但问题是寻找这样的结果。

<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>

前两个字段将“共享”;剩下的页面(注意:如果你在50%的字段中添加更多的文本，它将占用更多的空间)，最后一个字段将不断占据表格的主导地位。

如果你乐意让文本自动换行，你可以移动 white-space:nowrap;到第三个字段的样式
将是在该字段中开始新一行的唯一方法。

或者，你可以在最后一个字段上设置一个长度。宽度:150px，并在前两个字段上留下百分比。

希望这能有所帮助!


提交答案