使用calc（）与表 [英] using calc() with tables

问题描述

我试图获得一个固定宽度 td s和变量宽度 td 的表。

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

Im使用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-layout 属性，设置 width （ 100％），并确保 display：table 强制 td 元素以获得您声明的宽度：

What you can do however is to set the table-layout attribute, set a width (100% works), and ensure it is display: table to force the td elements to get the width you declared:

table{
   display: table; /* required for table-layout to be used (not normally necessary; included for completeness) */
   table-layout:fixed; /* this keeps your columns with fixed with exactly the right width */
   width: 100%; /* table must have width set for fixed layout to work as expected */
}

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

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 $ c> display：block ）表示您不能再有 height （包括 min-height 和 max-height ）。

But note that display: table (as opposed to say, display: block) means you can no longer have a height (including min-height and max-height).

查看您修改的示例

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