Html 使单元格宽度适合内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11267154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fit cell width to content
提问by Mansfield
Given the following markup, how could I use CSS to force one cell (all cells in column) to fit to the width of the content within it rather than stretch (which is the default behaviour)?
鉴于以下标记，我如何使用 CSS 强制一个单元格（列中的所有单元格）适应其中的内容宽度而不是拉伸（这是默认行为）？
<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<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>
EDIT: I realize I could hard code the width, but I'd rather not do that, as the content which will go in that column is dynamic.
编辑：我意识到我可以对宽度进行硬编码，但我宁愿不这样做，因为该列中的内容是动态的。
Looking at the image below, the first image is what the markup produces. The second image is what I want.
看看下面的图片，第一张图片是标记产生的。第二张图就是我想要的。
回答by MetalFrog
I'm not sure if I understand your question, but I'll take a stab at it. JSfiddle of the example.
我不确定我是否理解你的问题，但我会尝试一下。JSfiddle 的例子。
HTML:
HTML：
<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>
CSS:
CSS：
td{
border:1px solid #000;
}
tr td:last-child{
width:1%;
white-space:nowrap;
}
回答by Shubham Nigam
Setting
环境
max-width:100%;
white-space:nowrap;
will solve your problem.
将解决您的问题。
回答by myset
For me, this is the best autofit and autoresize for table and its columns (use css !important ... only if you can't without)
对我来说，这是表格及其列的最佳自动调整和自动调整大小（使用 css !important ... 仅当您不能没有时）
.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;
}
Don't specify css width for table or for table columns. If table content is larger it will go over screen size to.
不要为表格或表格列指定 css 宽度。如果表格内容较大，它将超过屏幕尺寸。
回答by Mladen Adamovic
Setting CSS width to 1% or 100% of an element according to all specs I could find out is related to the parent. Although Blink Rendering Engine (Chrome) and Gecko (Firefox) at the moment of writing seems to handle that 1% or 100% (make a columns shrink or a column to fill available space) well, it is not guaranteed according to all CSS specifications I could find to render it properly.
根据我能找到的所有规范将 CSS 宽度设置为元素的 1% 或 100% 与父元素有关。尽管在撰写本文时 Blink Rendering Engine (Chrome) 和 Gecko (Firefox) 似乎可以很好地处理 1% 或 100%（使列缩小或一列填充可用空间），但不能保证根据所有 CSS 规范我可以找到正确渲染它。
One option is to replace table with CSS4 flex divs:
一种选择是用 CSS4 flex div 替换 table：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
That works in new browsers i.e. IE11+ see table at the bottom of the article.
这适用于新的浏览器，即 IE11+，请参阅文章底部的表格。
回答by Christian Newman
There are many ways to do this!
有很多方法可以做到这一点！
correct me if I'm wrong but the question is looking for this kind of result.
如果我错了，请纠正我，但问题是寻找这种结果。
<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>
The first 2 fields will "share" the remaining page (NOTE: if you add more text to either 50% fields it will take more space), and the last field will dominate the table constantly.
前 2 个字段将“共享”剩余的页面（注意：如果向 50% 的字段添加更多文本，则将占用更多空间），最后一个字段将不断占据表格的主导地位。
If you are happy to let text wrap you can movewhite-space:nowrap; to the style of the 3rd field
will be the only way to start a new line in that field.
如果您愿意让文本换行，您可以移动white-space:nowrap; 到第三个字段的样式
将是在该字段中开始新行的唯一方法。
alternatively, you can set a length on the last field ie. width:150px, and leave percentage's on the first 2 fields.
或者，您可以在最后一个字段上设置长度，即。宽度：150px，并在前 2 个字段上保留百分比。
Hope this helps!
希望这可以帮助！
回答by Parth Jani
Simple :
简单的 ：
<div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>
