Question

您好我正在使用bootstrap。我有一个有很多列的表。我想修复具有定义宽度的表格的前三列，并使表格水平滚动。我有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知之甚少。正如我之前提到的，我使用的是bootstrap主题。我想水平滚动表格，并修复S.No，Id和Address整列。我无法想到将进入此的css或js。如果有人可以提供帮助，我将非常感激。

更新：

小提琴 - http://jsfiddle.net/6txc8dLb/

Answer 1

$(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 2

这应该可以在普通的html / css中实现：

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

Answer 3

@Kartikey，这是一个codeply project的链接，可以帮助您开始工作。我使用了名为sticky的CSS属性。这样做是将元素相对于文档上的任何内容定位，一旦它滚动到视口中的某个点，它就会修复元素的位置，可以使用top，{{{{{{ 1}}，bottom或您的right。

请考虑详细阅读此CSS-Tricks article中的位置属性。

CSS代码：

left

Answer 4

尝试在您的 css 文件中使用它

th:first-child,
td:first-child  {
position: sticky;
left: 0px;
z-index: 100;
background: #fff;

如何修复/冻结表中的前三列？

4 个答案: