テーブルの最初の3つの列を修正/フリーズする方法はありますか？

Question

こんにちは私は現在ブートストラップを使用しています。私は多くの列を持つテーブルを持っています。私は定義された幅でテーブルの最初の3つの列を修正し、テーブルを水平方向にスクロールしたい。私は12の列を持ち、データをより良く表現するために手動で幅を設定したいと考えています。

+-----+---------+-------------------+------------------+----------+--------- 
| No. | Id |  Address  | Numeric Category | Image 1 | Image 2 | Image 3 | Image 4 | Coordinates | | | | 
+-----+---------+-------------------+------------------+----------+---------+---------+----------+-------------+--+--+--+ 
| 1 |  121 | 123, Ring Road | A    |   |   |   |   |    | | | | 
| 2 |  122 | 123, Ring Road | B    |   |   |   |   |    | | | | 
| 3 | 322 | 123, Ring Road |A     |   |   |   |   |    | | | | 
| 4 |  222 | 123, Ring Road |     |   |   |   |   |    | | | | 
| 5 | 212 | 123, Ring Road |     |   |   |   |   |    | | | | 
+-----+---------+-------------------+------------------+----------+---------+---------+----------+-------------+--+--+--+ 

表コード： - - ：

<table class="table table-xxs"> 
    <thead> 
     <tr class="active"> 
      <th>S.No.</th> 
      <th>Response Id</th> 
      <th>Address</th> 
      <th>Category</th> 
      <th>Address</th> 
      <th>Image 1</th> 
      <th>Image 2</th> 
      <th>Image 3</th> 
      <th>Image 4</th> 
      <th>Coordinates</th> 
     </tr>        
    </thead> 

    <tbody> 

    </tbody> 
</table> 

私は、CSSやJavaScriptの少しの知識を持っているし、次のように表には見えます。私が前に述べたように、私はブートストラップテーマを使用しています。私はテーブルを水平にスクロールし、S.No、IdとAddressの全列を固定したい。私はこれに入るCSSやjsを考えることができません。誰かが助けることができれば、私は高く評価しています。

UPDATE：

フィドル - http://jsfiddle.net/6txc8dLb/

Answer 1

これは通常のHTML/CSSのトリックを行う必要があります。

<th style="width: (some value);"></th> 

Answer 2

$(document).ready(function() { 
 
    var table = $('#example').DataTable({ 
 
     scrollY:  "300px", 
 
     scrollX:  true, 
 
     scrollCollapse: true, 
 
     paging:   false, 
 
     fixedColumns: { 
 
      leftColumns: 3 
 
     } 
 
    }); 
 
});

th, td { white-space: nowrap; } 
 
    div.dataTables_wrapper { 
 
     width: 800px; 
 
     margin: 0 auto; 
 
    }

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
<link href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
 
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script> 
 
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%"> 
 
     <thead> 
 
      <tr> 
 
       <th>First name</th> 
 
       <th>Last name</th> 
 
       <th>Position</th> 
 
       <th>Office</th> 
 
       <th>Age</th> 
 
       <th>Start date</th> 
 
       <th>Salary</th> 
 
       <th>Extn.</th> 
 
       <th>E-mail</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <td>Tiger</td> 
 
       <td>Nixon</td> 
 
       <td>System Architect</td> 
 
       <td>Edinburgh</td> 
 
       <td>61</td> 
 
       <td>2011/04/25</td> 
 
       <td>$320,800</td> 
 
       <td>5421</td> 
 
       <td>t.nixon@datatables.net</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Garrett</td> 
 
       <td>Winters</td> 
 
       <td>Accountant</td> 
 
       <td>Tokyo</td> 
 
       <td>63</td> 
 
       <td>2011/07/25</td> 
 
       <td>$170,750</td> 
 
       <td>8422</td> 
 
       <td>g.winters@datatables.net</td> 
 
      </tr> 
 
    </tbody> 
 
</table>

Answer 3

@Kartikey、ここにありますcodeply projectにリンクするとあなたは働き始めます。私はstickyと呼ばれるCSSプロパティを使用しました。これは、ドキュメント上の要素を基準に要素を配置し、ビューポートの特定の点をスクロールすると、要素の位置を固定します。top、bottom、rightのようなプロパティを使用して指定できます。あなたのケースleft。

このCSS-Tricks articleのpositionプロパティについて詳しく読むことを検討してください。

CSSコード：

.freeze { 
    position: sticky; 
    left: 5px; 
    background-color: #ffffff; 
}