使用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议,我怎么能达到我的目标?

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

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

 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-heightmax-height )。

看到你修改的例子。

计算是一般function。

-webkit-calc用于webkit。

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

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

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

底线:不要使用计算表。