给定下面的标记,我如何使用CSS强制一个单元格(列中的所有单元格)以适应其中内容的宽度,而不是拉伸(这是默认行为)?
道明。块{
边框:1px纯黑色;
}
<table style="width: 100%;">
< tr >
<td class="block">这应该拉伸</td>
<td class="block">这应该拉伸</td>
<td class="block">这应该是内容宽度</td>
< / tr >
表> < /
我意识到我可以硬编码宽度,但我宁愿不这样做,因为内容将在该列是动态的。
查看下面的图像,第一个图像是标记产生的结果。第二张图就是我想要的。
对我来说,这是最好的自动拟合和自动调整表和它的列(使用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宽度。
如果表格内容较大,它将超过屏幕大小为。
有很多方法可以做到这一点!
如果我错了请指正,但问题是寻找这样的结果。
<表风格= "空白:nowrap;}宽度:100%;" >
< tr >
<td class="block" style="width:50%">这应该拉伸</td>
<td class="block" style="width:50%">这应该拉伸</td>
<td class="block" style="width:auto">这应该是内容宽度</td>
< / tr >
表> < /
前两个字段将“共享”剩下的页面(注意:如果你在50%的字段中添加更多的文本,它将占用更多的空间),最后一个字段将持续占据表格的主导地位。
如果你喜欢让文本自动换行,你可以移动空白:nowrap;到第3个字段的样式将是在该字段中开始新行的唯一方法。
或者,你可以在最后一个字段上设置一个长度。宽度:150px,并在前两个字段上留下百分比。
希望这能有所帮助!