水平スクロール（4列固定）のHTMLテーブル

Question

最初の4つの列が固定されているテーブルを作成するのには苦労しましたが、残りの部分は水平スクロールしました。この例が見つかりましたfirst column fixed

最初の列が固定されています。私はCSSを非常に新しくしており、4つの最初の列が固定されるように拡張することはできません。誰も助けることができますか？申し訳ありませんが、それは非常にシンプルでなければなりません、私はできません。

Answer 1

CSSスクロール：

table { 
    table-layout: fixed; 
    width: 100%; 
    *margin-left: -100px;/*ie7*/ 
} 
td, th { 
    vertical-align: top; 
    border-top: 1px solid #ccc; 
    padding:10px; 
    width:100px; 
} 
.col1{ 
    position:absolute; 
    *position: relative; /*ie7*/ 
    left:0; 
    width:100px; 
} 
.col2{ 
    position:absolute; 
    *position: relative; /*ie7*/ 
    left:100px; 
    width:100px; 
} 
.col3{ 
    position:absolute; 
    *position: relative; /*ie7*/ 
    left:200px; 
    width:100px; 
} 
.col4{ 
    position:absolute; 
    *position: relative; /*ie7*/ 
    left:300px; 
    width:100px; 
} 
.outer {position:relative} 
.inner { 
    overflow-x:scroll; 
    overflow-y:visible; 
    width:500px; 
    margin-left:400px; 
} 

をHTML：

<div class="outer"> 
    <div class="inner"> 
    <table> 
     <tr> 
      <th class="col1">Header A</th> 
      <th class="col2">Header A</th> 
      <th class="col3">Header A</th> 
       <th class="col4">Header A</th> 

      <td>col 2 - A (WITH LONGER CONTENT)</td> 
      <td>col 3 - A</td> 
      <td>col 4 - A</td> 
      <td>col 5 - A</td> 
      <td>col 6 - B</td> 
      <td>col 7 - B</td> 
     </tr> 
     <tr> 
      <th class="col1">Header B</th> 
      <th class="col2">Header B</th> 
       <th class="col3">Header B</th> 
       <th class="col4">Header B</th> 

      <td>col 2 - B</td> 
      <td>col 3 - B</td> 
      <td>col 4 - B</td> 
      <td>col 5 - B</td> 
      <td>col 6 - B</td> 
      <td>col 7 - B</td> 
     </tr> 
     <tr> 
      <th class="col1">Header C</th> 
      <th class="col2">Header C</th> 
       <th class="col3">Header C</th> 
       <th class="col4">Header C</th> 

      <td>col 2 - C</td> 
      <td>col 3 - C</td> 
      <td>col 4 - C</td> 
      <td>col 5 - C</td> 
      <td>col 6 - B</td> 
      <td>col 7 - B</td> 
     </tr> 
    </table> 
    </div> 
</div> 

https://jsfiddle.net/h75zn59o/

位置：絶対の;その最初のヘッダー列を修正する原因となります。オリジナルのCSSでは "th"だけに適用されますが、クラス（この例ではcol1、col2など）を使用して、異なる固定位置を異なる列に割り当てることができます。列は100ピクセル幅であるため、後続の各列は100ピクセル左に配置されます（最初の列は0ピクセル、次に100ピクセルのcol2など）。

Answer 2

あなたがスクロールしたいtdタグにいくつかのクラスを割り当て、オーバーフロー-Xを追加します。