如何修復/凍結表格中的前三列？

嗨，我目前正在使用引導程序。我有一張桌子，裏面有很多列。我想用定義的寬度修復表格的前三列，並使表格水平滾動。我有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/

來源

2017-09-01 Kartikey Vishwakarma

您可以加入小提琴，以幫助... –

我喜歡你的文字表，你應該使用;）的[修正了水平滾動欄] –

可能的複製（HTTPS ：//sackoverflow.com/questions/18826775/fix-columns-in-horizontal-scrolling） –

這應該做的伎倆在正常的HTML/CSS：

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

來源

2017-09-01 20:21:55 GreenStripedUnicorn

$(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>[email protected]</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>[email protected]</td> 
 
      </tr> 
 
    </tbody> 
 
</table>

來源

2017-09-01 20:32:33

@Kartikey，這裏是一個鏈接到一個codeply project即w生病給你一個工作的開始。我使用了一個名爲sticky的CSS屬性。它所做的是定位一個相對於文檔上的任何元素的元素，並且一旦它滾動經過視口中的某個點，它就修復元素的位置，可以使用如top，bottom,right或0123你的情況left。

請考慮閱讀更多關於此CSS-Tricks article的頭寸屬性。

CSS代碼：

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

來源

2017-09-01 20:41:06 cwanjt

如何修復/凍結表格中的前三列？

回答

相關問題