在表中使用calc（）

一尘不染

在表中使用calc（）

css

我正在尝试使用具有固定宽度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>

我怎么看，它应该起作用，但事实并非如此。

有人知道如何解决这个问题吗？或者，也许还有其他建议可以帮助我实现目标？

阅读 374

2020-05-16

共1个答案

一尘不染

表具有很难分配列空间的规则，因为默认情况下，表依赖于单元格的内容来分配空间。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-height和max-height）。

2020-05-16