给定下面的标记，我如何使用CSS强制一个单元格(列中的所有单元格)以适应其中内容的宽度，而不是拉伸(这是默认行为)?
道明。块{ 边框:1px纯黑色; ｝ <table style="width: 100%;"> < tr > <td class="block">这应该拉伸</td> <td class="block">这应该拉伸</td> <td class="block">这应该是内容宽度</td> < / tr > 表> < /
我意识到我可以硬编码宽度，但我宁愿不这样做，因为内容将在该列是动态的。
查看下面的图像，第一个图像是标记产生的结果。第二张图就是我想要的。
当前回答
根据我所能找到的所有规格，将CSS宽度设置为元素的1%或100%与父相关。虽然Blink渲染引擎(Chrome)和Gecko (Firefox)在写作的时候似乎可以很好地处理1%或100%(使列缩小或列填充可用空间)，但根据我能找到的所有CSS规范，它并不能保证正确地渲染它。
一种选择是用CSS4 flex divs替换表:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这适用于新的浏览器，即IE11+，见文章底部的表格。
其他回答
首先,设置
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
确保您的表格单元格将拉伸。
现在你只需要
td.fit {
width: 0;
min-width: fit-content;
}
在你的电池上。
请注意，现在只有当所有拟合单元格的内容过多而无法适合100%的表宽度时，表才会溢出宽度。
表{ 空白:nowrap;} 宽度:100%; ｝ td { 边框:1px纯黑色; ｝ td { max-width: 0; 溢出:隐藏; 文本溢出:省略; ｝ 道明。适合{ 宽度:0; min-width:适合内容; ｝ <表> < tr > <td class="stretch">这个应该拉伸</td> <td class="stretch">这个应该拉伸</td> <td class="fit">这应该是内容宽度</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，并在前两个字段上留下百分比。
希望这能有所帮助!
我不确定我是否理解你的问题，但我会尝试一下:
td { 边框:1px实心#000; ｝ Tr td:最后一个子{ 宽度:1%; 空白:nowrap;} ｝ <table style="width: 100%;"> < tr > <td class="block">这应该拉伸</td> <td class="block">这应该拉伸</td> <td class="block">这应该是内容宽度</td> < / tr > 表> < /
根据我所能找到的所有规格，将CSS宽度设置为元素的1%或100%与父相关。虽然Blink渲染引擎(Chrome)和Gecko (Firefox)在写作的时候似乎可以很好地处理1%或100%(使列缩小或列填充可用空间)，但根据我能找到的所有CSS规范，它并不能保证正确地渲染它。
一种选择是用CSS4 flex divs替换表:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这适用于新的浏览器，即IE11+，见文章底部的表格。
