CSS - calc无法正常工作Firefox

我想动态地将宽度添加到td，它在Chrome和Safari中正常工作，但在FF中无法正常工作。CSS - calc无法正常工作Firefox

HTML

<table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td>1</td> 
     <td>Title</td> 
     <td>Interpret</td> 
     <td>Album</td> 
     <td>Year</td> 
     <td>YouTube</td> 
    </tr> 
</table>

CSS

table{ 
    table-layout:fixed; 
    width: 100%; 
    border-collapse: collapse; 
} 
td{ 
    border:1px solid red; 
} 
td:first-child{ 
    width: calc(100%/6 * 0.5); 
} 
td:last-child{ 
    width: calc(100%/6 * 2); 
}

如果我硬编码的像素值，而不是为100%例如，calc(690px/6 * 2)，它的工作原理。

来源

2016-11-22 moustacheman

您将有Flexbox的更好的运气。 – 2016-11-22 14:39:21

删除此行的CSS：

table { 
    // table-layout: fixed; 
    width: 100%; 
    border-collapse: collapse; 
}

table-layout: fixed使您能够将自己的宽度适用于表。我不知道为什么Firefox不配合这个规定。

参考： using calc() with tables

来源

2016-11-22 14:36:18 Roberrrt

@Turnip哦？我从参考线索的顶部投票答案中读到它。我会调整它。谢谢！ – Roberrrt

同意！但固定布局提供了与所有'td'相等的宽度，并且在内容大小变化时不会改变。 – moustacheman

-1

为了这个工作，据我所知，在试图模拟一个固定的单元宽度是将table-layout从fixed到auto改变以及设置一个默认的宽度全部为td。

要动态地做到这一点，我们将表格宽度除以列数（在这种情况下，以百分比表示） - 100/6 = 16.66666...。

然后我们使用calc()内的值:first-child和:last-child，通过用16.6666%替换100%同时也保持现有的改性剂（0.5和2，分别地）。

CSS

table{ 
    table-layout:auto; 
    width: 100%; 
    border-collapse: collapse; 
} 
td{ 

    border:1px solid red; 
    width: 16.6666%; 
} 
td:first-child{ 
    width: calc(16.6666% * 0.5); 
} 
td:last-child{ 
    width: calc(16.6666% * 2); 
}

Example Fiddle

来源

2016-11-22 14:59:13 seantunwin

您不需要手动分割它，它会在您将'table-layout'更改为'auto'时起作用。 – moustacheman

@aravindtrue为了使它在Firefox中工作，根据OP的请求，有必要手动完成它，否则第一个和最后一个之间的所有列都会有不同的宽度。通过使这些列流畅且均匀，明确地解决这个问题，同时仍然允许第一个和最后一个是明确的（通过百分比*修饰符）。 – seantunwin

CSS - calc无法正常工作Firefox

回答

相关问题