将 calc() 与表格一起使用 [英] Using calc() with tables

问题描述

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

I'm trying to get a table with fixed-width tds and variable-width tds.

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

Im using the CSS calc() function, but somehow it seems like I can't use % in tables.

这就是我目前所拥有的:

So that is what I have so far:

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

我怎么看，它应该可以工作，但事实并非如此.

How I see it, it should work, but it isn't.

有人知道如何解决这个问题吗?或者对我如何实现目标有其他建议?

Does anybody know how to solve this? Or maybe has an other suggestion how I could reach my goal?

推荐答案

表格在分配列空间方面有困难的规则，因为默认情况下它们根据单元格的内容分配空间.Calc (atm) 只是无法使用它.

Tables have difficult rules about distributing the space of the columns because they distribute space dependent on the content of the cells by default. Calc (atm) just wont work with that.

然而你可以做的是设置 table-table 的 layout 属性强制子 td 元素获得您声明的确切宽度.为此，您还需要在桌子上有一个 width(100% 有效).

What you can do however is to set the table-layout attribute for the table to force the child td elements to get the exact width you declared. For this to work you also need a width (100% works) on the table.

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) */
}

然后在剩余的列上使用纯百分比.

and then use plain percentages on the remaining columns.

td.title, td.interpret{
    width:40%;
}
td.album{
    width:20%;
}

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

After using up the space for the fixed width columns, the remaining space is distributed between the columns with relative width.

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

For this to work you need the default display type display: table (as opposed to say, display: block). This however means you can no longer have a height (including min-height and max-height) for the table.

查看修改后的示例.

这篇关于将 calc() 与表格一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！