将单元格宽度适合内容

鉴于以下标记，我怎么能使用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> 

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

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

Answer 1

我不确定我是否理解你的问题，但是我会试一试。 JSfiddle的例子 。

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：

 td{ border:1px solid #000; } tr td:last-child{ width:1%; white-space:nowrap; } 

Answer 2

设置

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

将解决你的问题。

Answer 3

根据我所能find的所有规范，将CSS宽度设置为元素的1％或100％与父级相关。 尽pipeBlink Rendering Engine（Chrome）和Gecko（Firefox）在写作的时候似乎可以很好地处理1％或100％（使列缩小或填充可用空间的列），但根据所有CSS规范我可以find正确的渲染。

一个select是用CSS4 flex divreplace表格：

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

这在新的浏览器，IE11 +见本文底部的表。

Answer 4

对我来说，这是最好的autofit和自动调整表和它的列（使用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宽度。 如果表格内容较大，则会越过屏幕大小。