将calc()与表一起使用

Question

我正在尝试使用固定宽度tds和可变宽度tds 的表格.

我使用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>

我怎么看,它应该有效,但事实并非如此.

有人知道如何解决这个问题吗？或者可能有另一个建议我如何达到目标？

Answer 1

表格有关于分配列空间的困难规则,因为默认情况下它们会根据单元格的内容分配空间.Calc(atm)就是不能解决这个问题.

但是,您可以设置强制子元素获取您声明的确切宽度的table-layout属性.为此,你还需要一个(工作)在桌子上.tabletdwidth100%

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%;
}

在用完固定宽度列的空间后,剩余空间分布在具有相对宽度的列之间.

为此,您需要默认的显示类型display: table(而不是说display: block).但这意味着您不能再拥有该表的height(包括min-height和max-height).

查看修改过的示例.