html - 嵌套表格以百分比宽度对齐

Question

这里我有嵌套的格式化表格。每个表格行头的宽度与嵌套表格列的宽度相同。如果我添加任何填充或边距，表格单元格就会崩溃。如何在变化时使每一列的宽度相同。

这里是下面的代码:

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td,
th {
  border: 1px solid #000;
  padding: 0;
}

<table>
  <tr>
    <th width="20%">Head1</th>
    <th width="20%">Head2</th>
    <th width="20%">Head3</th>
    <th width="20%">Head1</th>
    <th width="20%">Head2</th>
  </tr>
</table>
<table>
  <tr>
    <td colspan="5">
      <table>
        <tr>
          <td>data1</td>
          <td>data2</td>
          <td>equa3</td>
          <td>data2</td>
          <td>equa3</td>
        </tr>
        <tr>
          <td colspan=5 "><table>
       <tr>
        <td>data1</td>
      <td>data2</td>
       <td>equa3</td>
     	 <td>data2</td>
      <td>equa3</td>
     </tr>
  
     </table></td></tr>
     </table></td>
     </tr>
     </table>

任何建议:

Answer 1

为什么要使用这种类型的结构因为当记录的内容超出您的期望时，您需要滚动条。那时您的表结构无法支持。我给出了一种结构，只要遵循它在任何环境中都能正常工作，但最后根据您的表结构不可能。

table,tr,th,td{
border:1px solid;
  border-collapse:collapse;
}
.header{
position:relative;
display:inline-block;
width:calc(100% - 17px);
width:-webkit-calc(100% - 17px);
width:-moz-calc(100% - 17px);
}

<div class="header">
<table width="100%">
  <tr height="25">
    <th width="20%">Head1</th>
    <th width="20%">Head2</th>
    <th width="20%">Head3</th>
    <th width="20%">Head4</th>
    <th width="20%">Head5</th>
  </tr>
</table>
</div>
<div style="width:100%; height:200px; overflow:auto;">
<table width="100%">
  <tr height="50">
    <td width="20%"> </td>
    <td width="20%"> </td>
    <td width="20%"> </td>
    <td width="20%"> </td>
    <td width="20%"> </td>
  </tr>
  <tr height="50">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr height="50">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr height="50">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr height="50">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr height="50">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</div>