PHP dynamic table width only displaying correctly in chrome (not firefox or safari)

PHP dynamic table width only displaying correctly in chrome (not firefox
or 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 idea's on how to fix this?
Images located here: (I would have put them placed within the post, but
due to reputation, I can't...)
http://imgur.com/a/FlwYX
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>";