PHP动态表格宽度仅在Chrome中正确显示（不是Firefox，Internet Explorer或Safari）。 为什么是这样？

Images are displayed underneath description of the problem; labeled respectively. Code is displayed at the end of the post.

The code displays correctly as shown in chrome (image 1), but incorrectly in firefox, internet explorer (referred to as I.E. later in post) and safari (image 2). When the table heading contents are removed, the table widths display correctly (image 3). I know the table widths are being calculated correctly as the <td>...</td> part of the table is consistently correct across all three browsers. The issue is purely in the display, does anyone have any ideas on how to fix this?

As the table should be displayed in Chrome:

The table in IE/Firefox/Safari:

The table in IE/Firefox/Safari when the <th>... </th> contents are emptied (no other code changes):

Code for table headings:

echo "<table class='main' style='width: 100%;' cellpadding='0' cellspacing='0'><tr>";
echo "<th style='width: 20%;'>Student Name</th>";
while($row2 = mysql_fetch_array($result2))
{
    extract($row2);
    echo "<th style='width: calc(80% / ".$numclasses.");'>**".$classname."**</th>";
}
echo "<th style='width: calc(80% / ".$numclasses.");'>**No Class**</th>";
...<insert correctly behaving <td>...</td> here...
echo "</table>";

the calc css property works on latest version of browsers.You can use vender prefixes for for some older ones. The best thing to do is calculate the calculation in php and then output the result using echo.check this in can i use calc()