具有固定列的响应式水平滚动表答案

【问题标题】：Responsive horizontal scrolling table with fixed columns具有固定列的响应式水平滚动表
【发布时间】：2018-11-28 06:44:12
【问题描述】：

我想创建一个表格，它有两个固定列，左右两列，中间有一个水平滚动部分。一个问题是，由于表格是响应式的，因此无法为溢出提供宽度值，并且可能有任意数量的列或行。

在此处查看模型 - 中间部分滚动，但左右两列保持固定。

我已经尝试过将三个不同的表浮动在一起，但这很混乱而且很难维护。

<table>
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>
<div class="scrollable-section">
    <table>
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
</div>
<table>
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>

基本上，我想在一个表中实现这一点，如果需要使用此标记，我不介意添加任何 JavaScript 位：

table {
  position: relative;
  width: calc(100% - 200px);
  margin-left: 100px;
}

table {
  overflow-x: scroll;
}

table th {
  background: #333;
  color: #fff;
  padding: 12px;
}

table td:first-of-type, table th:first-of-type {
/* fixed left column */
  position: absolute;
  left: -100px;
  width: 100px;
  
}

table td:last-of-type, table th:last-of-type {
/* fixed right column */
  position: absolute;
  right: -100px;
  width: 100px;
}

<table>
    <thead>
        <tr>
            <th>Row titles</th>
            <th>Title</th>
            <th>Title</th>
            <th>Title</th>
            <th>Title</th>
            <th>Title</th>
            <th>Title</th>
            <th>Title</th>
            <th>Title</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row title</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td><button>Do something</button></td>
        </tr>
        <tr>
            <td>Row title</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td><button>Do something</button></td>
        </tr>
    </tbody>
</table>

【问题讨论】：

我认为没有嵌套是不可能的。一种方法是将具有两个固定列的表构建为三列表（2 个固定的外部列和一个中间的灵活列）。用 overflow-x: auto 定义中间列 td，然后在该 td 内生成带有标题列的表。（作为旁注，我不会使用表格，而是使用 div 元素，并使用 css 表格属性设置它们的样式）
stackoverflow.com/questions/43616675/… 参考这个
无关：我在 stackoverflow.com/review/triage/20858659 上看到了您对 EDIT 的投票。错误的选择：这个问题太宽泛了，除了 OP 之外的任何人都没有机会解决这个问题。它应该因为太宽泛而被关闭。请研究分流队列的帮助，并更加小心您的投票。

标签： javascript jquery html css html-table

【解决方案1】：

你可以试试datatable逻辑，已经有一些不错的贡献了。

【讨论】：

早就应该知道了，谢谢！