ネストされたテーブルの配置とパーセンテージの幅

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> 
 
     \t <td>data2</td> 
 
     <td>equa3</td> 
 
    </tr> 
 
    
 
    </table></td></tr> 
 
    </table></td> 
 
    </tr> 
 
    </table>

任意の提案：

Answer 1

使用このタイプの構造は、なぜあなたの期待は、あなたはその時.Onスクロールバーが必要であることをレコードがよりときので与えられた一つの構造をsupports.Iすることはできませんあなたのテーブル構造はそれに任意の中にその作業罰金に従ってくださいしかし、最終的にあなたのテーブル構造によると、それは不可能です。

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>

Answer 2

あなたはCSSであなたの目のフィールドにして、両方のテーブルを共有するこの方法を追加する必要があります同じ幅の属性。

td,th { border: 1px solid #000; padding: 0; width: 20%; }