18

我正在尝试获得一个具有固定宽度td和可变宽度td的表格。

我正在使用 CSScalc()函数，但不知何故，我似乎无法%在表格中使用。

这就是我到目前为止所拥有的：

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

我怎么看，它应该工作，但它不是。

有谁知道如何解决这个问题？或者也许有其他建议我可以如何实现我的目标？

4

2 回答 2

29

表格在分配列空间方面有困难的规则，因为它们默认分配空间取决于单元格的内容。Calc (atm) 无法使用。

但是，您可以做的是设置table-layout属性table以强制子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-heightand ）。max-height

请参阅您修改后的示例。

于 2013-04-08T08:06:13.820 回答
-1

Calc 是通用函数。

-webkit-calc用于 webkit。

根据您使用的浏览器添加它们。

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

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

底线：不要将 calc 与表格一起使用。

于 2013-04-08T07:20:11.827 回答