html - 2 つのテーブルの幅を同じに保つ

Question

ここに 2 つのテーブルがあります。これら 2 つのテーブルの幅を同じにしたいのですが、Confirmer 名が長い場合、2 番目のテーブルは拡張されますが、最初のテーブルは同じままです。どのような状況でも両方を同じ幅にしたいのですが、どうすればよいですか?それは行われますか？このJS Binの例を確認してください。

HTML:

<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>&nbsp;</td>
</tr>
<tr>
<td>Lastname Firstname</td>
<td>
<img src="xyz.png">
</td>
<td>           24/05/2013 06:43  </td>
<td>&nbsp;</td>
</tr>
<tr>
<td>User Administrator</td>
<td>
<img src="xyz.png">
</td>
<td>         24/05/2013 06:43  </td>
<td>&nbsp;</td>
</tr>
</tbody></table>

CSS:

thead{
  background-color: grey;
}


table, td
{
  background:#fffAF0;
border: 1px solid black;
border-collapse:collapse;
}