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

【问题标题】：How to fix/freeze first three columns in a table?如何修复/冻结表中的前三列？
【发布时间】：2021-03-20 23:21:22
【问题描述】：

您好，我目前正在使用引导程序。我有一个有很多列的表。我想用定义的宽度修复表格的前三列并使表格水平滚动。我有 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。如果有人能提供帮助，我将不胜感激。

更新：

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

【问题讨论】：

你能加个小提琴来帮忙吗...
我喜欢你的文本表，你应该使用它；）
Fix columns in horizontal scrolling的可能重复
@GopalkrishnaNarayanPrabhu 更新

标签： html css twitter-bootstrap

【解决方案1】：

@Kartikey，这是一个指向codeply project 的链接，它将为您提供一个工作的开始。我使用了一个名为sticky 的CSS 属性。它的作用是将元素相对于文档上的任何内容定位，一旦它滚动到视口中的某个点，它就会固定元素的位置，可以使用top、bottom等属性指定， right，或者你的情况是left。

考虑在CSS-Tricks article 中阅读更多关于 position 属性的内容。

CSS 代码：

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

【讨论】：

sticky 是一个很好的位置属性。这似乎适用于单列，但它如何适用于多列？

【解决方案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>

【讨论】：

如果我需要固定列和固定标题，则不起作用

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

这应该可以在普通的 html/css 中解决问题：

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

【讨论】：