固定列的響應式水平滾動表

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代碼：

 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> 

Answer 1

您可以嘗試的數據表的邏輯，也有一些很好的貢獻已經可用。