My goal is to dynamically adjust the widths of td elements in my table. This functionality works smoothly in Chrome and Safari, but not in Firefox.
Here is the HTML structure:
<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>
And this is the CSS I am using:
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);
}
Interestingly, hard coding pixel values like calc(690px / 6 * 2) instead of using 100% seems to fix the issue in Firefox.