2つのテーブルが縦になっていて、1つのテーブルが別のテーブルのヘッダーとして機能していて、その列と幅が一致していません。

Question

2つのテーブルがあります（この方法を使用しています）。応答可能なアプローチのために、すべてのテーブルの幅はパーセンテージです。

表1：ヘッダー（1列のみ）を表示します。

表2：データを表示する。これは、スタイルheight:70px & overflow:auto;でdivにラップされているため、スクロール可能です。

両方のテーブルの幅は同じですが、行の位置が揃っていません。height:70pxを削除した場合は、スクロールバーが原因です。

質問：

1.は、スペースを埋めるために任意の溶液（添付画像）

2.はdiv要素のうち、スクロールバー を表示する方法はありです。

JSFIDDLE for same.

Answer 1

あなたの第一及び第二のポイントは、実際に関連しています。 2番目のテーブルの幅は、垂直スクロールバーの幅を含むため、影響を受けています。あなたがあなたの問題の両方を解決しようとすることができます何かがあなたの第二DIVにこれを行うことにより、スクロールバーの17px幅を補償することである。

width: calc(90% + 17px); 

そして、あなたのテーブルに100％の幅を作る：

width: 100%; 

https://jsfiddle.net/tp0ht500/2/

は、あなたのアカウントにスクロールバーの幅を取りながら、この場合には、あなたが幅を一致させることを可能にするピクセルと割合の幅を、結合するCSS calcを使用することができます。

Answer 2

なぜあなたは、2つのテーブルを作成していますか？ 1つだけを使用してください。

以下抜粋：

tbody { 
 
    margin-top: 42px; 
 
    height: 100px; 
 
    display: block; 
 
} 
 
thead { 
 
    position: absolute; 
 
    background: #fff; 
 
}

<div> 
 
    <div style="overflow:auto; width:100%;"> 
 
    <table border="1" cellspacing="1" cellpadding="1"> 
 
     <thead> 
 
     <tr> 
 
      <td colspan="9">Table header</td> 
 
     </tr> 
 
     <tr> 
 
      <th>Header1</th> 
 
      <th>Header2</th> 
 
      <th>Header3</th> 
 
      <th>Header4</th> 
 
      <th>Header5</th> 
 
      <th>Header6</th> 
 
      <th>Header7</th> 
 
      <th>Header8</th> 
 
      <th>Header9</th> 
 

 
     </tr> 
 

 

 
     </thead> 
 
     <tbody> 
 

 
     <tr> 
 
      <td>Content1</td> 
 
      <td>Content2</td> 
 
      <td>Content3</td> 
 
      <td>Content4</td> 
 
      <td>Content5</td> 
 
      <td>Content6</td> 
 
      <td>Content7</td> 
 
      <td>Content8</td> 
 
      <td>Content9</td> 
 

 
     </tr> 
 

 

 
     <tr> 
 
      <td>Content1</td> 
 
      <td>Content2</td> 
 
      <td>Content3</td> 
 
      <td>Content4</td> 
 
      <td>Content5</td> 
 
      <td>Content6</td> 
 
      <td>Content7</td> 
 
      <td>Content8</td> 
 
      <td>Content9</td> 
 

 
     </tr> 
 

 

 
     <tr> 
 
      <td>Content1</td> 
 
      <td>Content2</td> 
 
      <td>Content3</td> 
 
      <td>Content4</td> 
 
      <td>Content5</td> 
 
      <td>Content6</td> 
 
      <td>Content7</td> 
 
      <td>Content8</td> 
 
      <td>Content9</td> 
 

 
     </tr> 
 

 

 

 
     <tr> 
 
      <td>Content1</td> 
 
      <td>Content2</td> 
 
      <td>Content3</td> 
 
      <td>Content4</td> 
 
      <td>Content5</td> 
 
      <td>Content6</td> 
 
      <td>Content7</td> 
 
      <td>Content8</td> 
 
      <td>Content9</td> 
 

 
     </tr> 
 

 

 

 
     <tr> 
 
      <td>Content1</td> 
 
      <td>Content2</td> 
 
      <td>Content3</td> 
 
      <td>Content4</td> 
 
      <td>Content5</td> 
 
      <td>Content6</td> 
 
      <td>Content7</td> 
 
      <td>Content8</td> 
 
      <td>Content9</td> 
 

 
     </tr> 
 

 

 

 
     <tr> 
 
      <td>Content1</td> 
 
      <td>Content2</td> 
 
      <td>Content3</td> 
 
      <td>Content4</td> 
 
      <td>Content5</td> 
 
      <td>Content6</td> 
 
      <td>Content7</td> 
 
      <td>Content8</td> 
 
      <td>Content9</td> 
 

 
     </tr> 
 

 

 

 
     <tr> 
 
      <td>Content1</td> 
 
      <td>Content2</td> 
 
      <td>Content3</td> 
 
      <td>Content4</td> 
 
      <td>Content5</td> 
 
      <td>Content6</td> 
 
      <td>Content7</td> 
 
      <td>Content8</td> 
 
      <td>Content9</td> 
 

 
     </tr> 
 

 

 

 
     <tr> 
 
      <td>Content1</td> 
 
      <td>Content2</td> 
 
      <td>Content3</td> 
 
      <td>Content4</td> 
 
      <td>Content5</td> 
 
      <td>Content6</td> 
 
      <td>Content7</td> 
 
      <td>Content8</td> 
 
      <td>Content9</td> 
 

 
     </tr> 
 

 

 

 
     <tr> 
 
      <td>Content1</td> 
 
      <td>Content2</td> 
 
      <td>Content3</td> 
 
      <td>Content4</td> 
 
      <td>Content5</td> 
 
      <td>Content6</td> 
 
      <td>Content7</td> 
 
      <td>Content8</td> 
 
      <td>Content9</td> 
 

 
     </tr> 
 

 

 

 
     <tr> 
 
      <td>Content1</td> 
 
      <td>Content2</td> 
 
      <td>Content3</td> 
 
      <td>Content4</td> 
 
      <td>Content5</td> 
 
      <td>Content6</td> 
 
      <td>Content7</td> 
 
      <td>Content8</td> 
 
      <td>Content9</td> 
 

 
     </tr> 
 

 

 

 
     <tr> 
 
      <td>Content1</td> 
 
      <td>Content2</td> 
 
      <td>Content3</td> 
 
      <td>Content4</td> 
 
      <td>Content5</td> 
 
      <td>Content6</td> 
 
      <td>Content7</td> 
 
      <td>Content8</td> 
 
      <td>Content9</td> 
 

 
     </tr> 
 

 
     </tbody> 
 

 
    </table> 
 

 

 
    </div> 
 

 

 
</div>