How can I ensure that two tables have the same width at all times, even when the Confirmer name is long and causes one table to expand while the other remains the same? Is there a way to keep both tables of equal width in any situation? You can view an example on this JS Bin.
This is the HTML code:
<table>
<tbody><thead><tr><th>1.5 - STATE</th>
</tr></thead><tr>
<td>
<b>Issued by </b>User Administrator <b>on</b><font face="verdana" size="1" color="red"> 24/05/2013 06:43
</font></td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<th>
Confirmer
</th>
<th>Status</th>
<th>Date</th>
<th>Comment</th>
</tr>
<tr>
<td>Pathak Chankey</td>
<td>
<img src="xyz.png">
</td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>Lastname Firstname</td>
<td>
<img src="xyz.png">
</td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>User Administrator</td>
<td>
<img src="xyz.png">
</td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
</tbody></table>
And here is the CSS code:
thead{
background-color: grey;
}
table, td
{
background:#fffAF0;
border: 1px solid black;
border-collapse:collapse;
}