Question

这里我有2个表，我希望这两个表的宽度相同，当Confirmer名称很长时，第二个表扩展但第一个表保持相同，我希望它们在任何情况下都具有相同的宽度，怎么办呢？请查看此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

Answer 2

为什么不使用单个表？

<table>
        <tr>
            <th colspan="4">1.5 - STATE</th>
        </tr>       
    <tr>
        <td colspan="4"><b>Issued by </b>User Administrator <b>on</b><font face="verdana" size="1" color="red"> 24/05/2013 06:43 </font></td>
    </tr>
    <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>
</table>

保持两个表的宽度相同

2 个答案: