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

表有关于分配列空间的困难规则，因为它们默认分配依赖于单元格内容的空间。 Calc（atm）就是不能解决这个问题。

但是，您可以设置table的{{3}}属性，以强制子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%;
}

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

要使其正常工作，您需要默认的显示类型display: table（而不是display: block）。但是，这意味着您不能再拥有该表的height（包括min-height和max-height）。

table-layout

Answer 2

Calc是一般功能。

-webkit-calc适用于webkit。

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

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

但是，如果TD的输入为5％，则总宽度将小于表格的宽度，因此也会被忽略。

底线：不要在表中使用calc。

将calc（）与表一起使用

2 个答案: