使用calc（）和表

我试图得到固定宽度的td和可变宽度td的表。

我使用CSS calc()函数，但不知何故，似乎我不能在表中使用% 。

所以这是我迄今为止：

 <table border="0" style="width:100%;border-collapse:collapse;"> <tr style="width:100%"> <td style="width:30px;">1</td> <!--Fixed width--> <td style="width: calc( (100% - 230px) / 100 * 40);">Title</td> <!--Width should be 40% of the remaining space--> <td style="width: calc( (100% - 230px) / 100 * 40);">Interpret</td> <!--Width should be 40% of the remaining space--> <td style="width: calc( (100% - 230px) / 100 * 20);">Album</td> <!--Width should be 20% of the remaining space--> <td style="width:80px;">Year</td><!--Fixed width--> <td style="width:180px;">YouTube</td><!--Fixed width--> </tr> </table> 

我怎么看，它应该工作，但事实并非如此。

有人知道如何解决这个问题吗？ 或者，也许有其他build议，我怎么能达到我的目标？

Answer 1

表格有分配列的空间的困难规则，因为默认情况下它们分布的空间取决于单元格的内容。 Calc（atm）只是不会和那个一起工作。

你可以做的是设置table-layout属性来强制子td元素获得你声明的确切宽度。 为了这个工作，你还需要一个width （ 100%作品）在桌子上。

 table{ table-layout:fixed; /* this keeps your columns with at the defined width */ width: 100%; /* a width must be specified */ display: table; /* required for table-layout to be used (since this is the default value it is normally not necessary; just included for completeness) */ } 

然后在其余列上使用普通百分比。

 td.title, td.interpret{ width:40%; } td.album{ width:20%; } 

用完固定宽度列的空间之后，剩余空间分布在相对宽度的列之间。

为了这个工作，你需要默认的显示typesdisplay: table （而不是说， display: block ）。 但是，这意味着您不能再拥有桌子的height （包括min-height和max-height ）。

看到你修改的例子。

Answer 2

计算是一般function。

-webkit-calc用于webkit。

根据您使用的浏览器添加这些内容。

无论如何，你的-calc函数将被忽略。 有3个TD将是剩余宽度的40％？ 这是总共的120％。 这是一张桌子。 父母的宽度将始终优先。

但是，如果你的TD在5％以内，它的总宽度会比表格的小，所以也会被忽略。

底线：不要使用计算表。