画面幅に基づいてテーブル上に余白が残っています。スクロールバー

Question

私は、画面の左側に従業員名のスティッキーテーブル列を持っています。そしてスクロールバーの横に大きなテーブルがあります。

アイデアは、大きなテーブルの内容を見るために右にスクロールして、名前を付けたスティッキーテーブルの列がテーブルを右に押すことを示します。

このようにして、画面の左側に名前の概要が表示され、テーブルが重なっていません。

正常に動作しないようですが、誰かに提案がありますか？

Answer 1

あなたはエクセル固定列のような効果を達成したい場合：

.table-wrapper { 
    overflow-x:scroll; 
    overflow-y:visible; 
    width:250px; 
    margin-left: 120px; 
} 

td, th { 
    padding: 5px 20px; 
    width: 100px; 
} 

th:first-child { 
    position: fixed; 
    left: 5px 
} 

Working Demo

Answer 2

利用ブートストラップ：

を次のように行います。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="col-xs-2">Left side</div> 
 
    <div class="col-xs-10"> 
 
    <div class="table-responsive"> 
 
     <table class="table"> 
 
     <thead> 
 
      <th>TH1</th> 
 
      <th>TH2</th> 
 
      <th>TH3</th> 
 
      <th>TH4</th> 
 
      <th>TH5</th> 
 
      <th>TH6</th> 
 
      <th>TH7</th> 
 
      <th>TH8</th> 
 
      <th>TH9</th> 
 
      <th>TH10</th> 
 
      <th>TH11</th> 
 
      <th>TH12</th> 
 
     </thead> 
 
     <tbody> 
 
      <td>TD1</td> 
 
      <td>TD2</td> 
 
      <td>TD3</td> 
 
      <td>TD4</td> 
 
      <td>TD5</td> 
 
      <td>TD6</td> 
 
      <td>TD7</td> 
 
      <td>TD8</td> 
 
      <td>TD9</td> 
 
      <td>TD10</td> 
 
      <td>TD11</td> 
 
      <td>TD12</td> 
 
     </tbody> 
 
     <tfoot> 
 
      <th>TH1</th> 
 
      <th>TH2</th> 
 
      <th>TH3</th> 
 
      <th>TH4</th> 
 
      <th>TH5</th> 
 
      <th>TH6</th> 
 
      <th>TH7</th> 
 
      <th>TH8</th> 
 
      <th>TH9</th> 
 
      <th>TH10</th> 
 
      <th>TH11</th> 
 
      <th>TH12</th> 
 
     </tfoot> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>

この例では、バージョン3である、しかし、あなたは新しいもの（V4）を使用することができます。