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>";