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

Question

我想创建一个有两个固定列的表，左边和右边以及中间的水平可滚动部分。问题是因为表是响应式的，所以不能为溢出提供宽度值，并且可以有任意数量的列或行。

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

我已经尝试过将三张不同的桌子放在一起，但这很麻烦而且很难维护。

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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