对表使用calc()

Question

我正在尝试获得一个具有固定宽度的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>

在我看来，它应该是有效的，但事实并非如此。

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

Answer 1

表格在分配列的空间方面有困难的规则，因为默认情况下，它们根据单元格的内容分配空间。计算(自动取款机)就是不能这样做。

但是，您可以做的是为table设置table-layout属性，以强制td子元素获得您声明的确切宽度。要实现这一点，您还需要桌面上有一个width (100% works)。

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

See your modified Example.

Answer 2

Calc是通用函数。

-webkit-calc是用于webkit的。

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

无论如何，您的-calc- function都将被忽略。有3个td，这将是剩余宽度的40%？这总共是120%。这是一张桌子。父对象的宽度将始终优先。

但是，如果TD在5%内，它的总宽度将小于表格的总宽度，因此也将被忽略。

底线:不要对table使用calc。