创建带有可滚动标题的表格

Posted 2023-03-06

【中文标题】创建带有可滚动标题的表格

【英文标题】：Create a Table with scrollable Header

【发布时间】：2020-11-06 14:27:41

【问题描述】：

关于如何制作具有固定标题和可滚动正文的表格的文章有数千篇。

但我没有找到任何关于带有可滚动标题的表格。

在我的情况下，有很多列并且它们在屏幕上没有足够的空间，如何使其具有固定宽度并可以水平滚动？

我尝试将table 包含在div 中：

<div className="table-container">
  <table> ... </table>
</div>


.table-container 
  width: 50%;

【参考方案1】：

查看w3schools

.table-container 
  width: 50%;
overflow-x:auto;

【参考方案2】：

您可以使用position: sticky，但请注意旧版浏览器不支持此功能。

<div style="position: relative; top: 25px; left: 25px; width: 500px; height: 150px; overflow: auto;">

        <table style="width: 100%;">
            <thead>
            <tr>
                <th style="position: sticky; top: 0; background-color: silver;">Column 1</th>
                <th style="position: sticky; top: 0; background-color: silver;">Column 2</th>
                <th style="position: sticky; top: 0; background-color: silver;">Column 3</th>
                <th style="position: sticky; top: 0; background-color: silver;">Column 4</th>
            </tr>
            </thead>
            <tbody style="overflow: auto;">
            <tr>
                <td>Row 1 Col 1</td><td>Row 1 Col 2</td><td>Row 1 Col 3</td><td>Row 1 Col 4</td>
            </tr>
            <tr>
                <td>Row 2 Col 1</td><td>Row 2 Col 2</td><td>Row 2 Col 3</td><td>Row 2 Col 4</td>
            </tr>
            <tr>
                <td>Row 3 Col 1</td><td>Row 3 Col 2</td><td>Row 3 Col 3</td><td>Row 3 Col 4</td>
            </tr>
            <tr>
                <td>Row 4 Col 1</td><td>Row 4 Col 2</td><td>Row 4 Col 3</td><td>Row 4 Col 4</td>
            </tr>
            <tr>
                <td>Row 5 Col 1</td><td>Row 5 Col 2</td><td>Row 5 Col 3</td><td>Row 5 Col 4</td>
            </tr>
            <tr>
                <td>Row 6 Col 1</td><td>Row 6 Col 2</td><td>Row 6 Col 3</td><td>Row 6 Col 4</td>
            </tr>
            <tr>
                <td>Row 7 Col 1</td><td>Row 7 Col 2</td><td>Row 7 Col 3</td><td>Row 7 Col 4</td>
            </tr>
            <tr>
                <td>Row 8 Col 1</td><td>Row 8 Col 2</td><td>Row 8 Col 3</td><td>Row 8 Col 4</td>
            </tr>
            <tr>
                <td>Row 9 Col 1</td><td>Row 9 Col 2</td><td>Row 9 Col 3</td><td>Row 9 Col 4</td>
            </tr>
            <tr>
                <td>Row 10 Col 1</td><td>Row 10 Col 2</td><td>Row 10 Col 3</td><td>Row 10 Col 4</td>
            </tr>
            </tbody>
        </table>

    </div>