html - 保持两个表的宽度相同

Question

这里我有两个表，我希望这两个表的宽度相同，当确认名称很长时，第二个表会扩展，但第一个表保持不变，我希望它们在任何情况下都具有相同的宽度，那怎么办呢？检查这个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;
}

Answer 1

只需添加一个容器并在容器中设置宽度，然后将 100% 宽度应用到表格，如下所示

div{

  width:400px;
}

table {

  width:100%;
}

<div>
 <table></table>
 <table></table>
</div>

http://jsbin.com/iduciw/32/edit