给定下面的标记，我如何使用CSS强制一个单元格(列中的所有单元格)以适应其中内容的宽度，而不是拉伸(这是默认行为)?
道明。块{ 边框:1px纯黑色; ｝ <table style="width: 100%;"> < tr > <td class="block">这应该拉伸</td> <td class="block">这应该拉伸</td> <td class="block">这应该是内容宽度</td> < / tr > 表> < /
我意识到我可以硬编码宽度，但我宁愿不这样做，因为内容将在该列是动态的。
查看下面的图像，第一个图像是标记产生的结果。第二张图就是我想要的。
当前回答
设置
max-width:100%;
white-space:nowrap;
会解决你的问题。
其他回答
有很多方法可以做到这一点!
如果我错了请指正，但问题是寻找这样的结果。
<表风格= "空白: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，并在前两个字段上留下百分比。
希望这能有所帮助!
根据我所能找到的所有规格，将CSS宽度设置为元素的1%或100%与父相关。虽然Blink渲染引擎(Chrome)和Gecko (Firefox)在写作的时候似乎可以很好地处理1%或100%(使列缩小或列填充可用空间)，但根据我能找到的所有CSS规范，它并不能保证正确地渲染它。
一种选择是用CSS4 flex divs替换表:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这适用于新的浏览器，即IE11+，见文章底部的表格。
设置
max-width:100%;
white-space:nowrap;
会解决你的问题。
对我来说，这是最好的自动拟合和自动调整表和它的列(使用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%'>
