Css 对表使用calc（）

我试图得到一个固定宽度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>

在我看来，它应该起作用，但事实并非如此

---

有人知道怎么解决这个问题吗？或者可能有其他建议如何实现我的目标？

Calc是通用功能

-webkit calc适用于webkit

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

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

但是，如果TD的值为5%，则其总宽度将小于表格的宽度，因此也将被忽略

---

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

表格在分配列的空间方面有困难的规则，因为默认情况下，它们根据单元格的内容分配空间。计算机自动取款机就是不能用这个

但是，您可以做的是为表设置属性，以强制子td元素获得您声明的确切宽度。为了让它工作，你还需要一个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。但是，这意味着您不能再为表格设置包含最小高度和最大高度的高度

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

---

我还不会使用calc：至少再等6个月，直到每个浏览器都支持cal，这样你就可以避免很多兼容性问题。对于不同的TD宽度，请尝试使用。firefox在版本18左右的时候删除了前缀somehere，chrome也在不久前删除了前缀somehere。因此，safari只需要-webkit前缀。Opera根本不支持这个。我不知道。但是，不管语法如何，他的方法都没有calc的解决方案。顺便说一句，一列的宽度应该是20%，因此它总共正好是剩余空间的100%，理论上应该可以解决这个问题。问题在于表的性质，即根据默认表布局设置中的内容分配列的空间。从技术上讲，如果每列的宽度为20%，则可以只设置20%的宽度。为什么要使用calc呢？OP希望有一些固定宽度的列，其余的列将占据4 | 4 | 2分布中的剩余空间。这就是为什么他使用calc来计算表的剩余空间。我真的希望它能以这种方式工作，但至少在当前的FF 35和GC 40上不能。输入百分比会将其他单元格的宽度挤压到其最小渲染宽度，就像设置了“自动”一样。也许是因为我要设置宽度的第一行是标题行th cells？？？@LawrenceDol让我看看你的例子，我们一起来解决这个问题。@Christoph：看起来关键的缺失因素是表格必须设置宽度；设置宽度：100%解决了我的问题，并使固定布局按预期工作。我犯的另一个错误是将表格设置为display:block以使其符合最小高度。必须是display:table才能使固定布局得到尊重。@LawrenceDol表的显示类型不得超过display:table。如果是这样的话，就有问题了，可能应该使用不同的标记，最有可能的是纯div。此外，如今，flex box布局可以用来处理许多在过去由表格布局完成的事情。但感谢编辑，宽度确实是一个重要因素！