如何设置溢出不影响 table 中的主行？

Question

我想创建一个 table，其中有很多列。将有水平和垂直滚动。滚动时水平滚动会移动到每一列，每列都由和组成，而垂直滚动只会影响项目行。这意味着当我向下或向上滚动 table 时，我将始终停留在 table 中的相同位置。我想到了两个来做这件事，但他们都失败了。水平和垂直仍然影响我

    Overflow for title, only support horizontal scroll
<div class="dddd1" style="overflow-x: auto; border:2px solid black;">
    <table>
        <thead>
            <tr>
                <th>Alo</th>
                <th>Alo</th>
                <th>Alo</th>
                <th>Alo</th>
                <th>Alo</th>
            </tr>
        </thead>
        Overflow for item, support vertical scroll
        <tbody style="overflow-y: auto;">
            <tr>
                <td>Yes</td>
                <td>Yes</td>
                <td>Yes</td>
                <td>Yes</td>
                <td>Yes</td>
            </tr>
        </tbody>
    </table>
</div>





    Overflow for title, only support horizontal scroll 
<div class="dddd1" style="overflow-x: auto; border:2px solid black;">
    <table>
        <thead>
            <tr>
                <th>Alo</th>
                <th>Alo</th>
                <th>Alo</th>
                <th>Alo</th>
                <th>Alo</th>
            </tr>
        </thead>
    </table>
     Overflow for item, support vertical scroll 
    <div style="overflow-y: auto;">
        <table>
            <tbody>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

从标签中删除溢出声明并将其添加到第一种情况的 css 文件中。您可以对第二种情况执行相同的操作，但使用 div.dddd1 和 div 中的第一个 table （可能使用 id secondtable）：

table {                               // or for 2. case div.dddd1
    position: relative;
}
th {                                  // or for 2. case #secondtable
    background-color: white;
    position: sticky; 
    top: 0;
}

如果您没有 css 文件，则将其包装在 html 文件头部的 <style></style> 标签中...

工作示例：

                   /* === just for demonstration (start) === */
            #body {
                display: flex;
                flex-direction: row;
            }
            .dddd1 {
              margin-left: 50px;
                max-height: 100px;
                max-width: 100px; 
                overflow: scroll;  
            }                             
                   /* === just for demonstration (end) === */
            
                  
            .dddd1 {
                position: relative;
                border:2px solid black;
            }
            #firsttable {
                position: relative;
            }
            #secondtable,
            #firsttable th {
                position: sticky;
                top: 0;
            }
            table th {
                background-color: white;
            }

<div id="body">
    <div class="dddd1">
        <table id="firsttable">
            <thead>
                <tr>
                    <th>Alo</th>
                    <th>Alo</th>
                    <th>Alo</th>
                    <th>Alo</th>
                    <th>Alo</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="dddd1">
        <table id="secondtable">
            <thead>
                <tr>
                    <th>Alo</th>
                    <th>Alo</th>
                    <th>Alo</th>
                    <th>Alo</th>
                    <th>Alo</th>
                </tr>
            </thead>
        </table>
        
        <table>
            <tbody>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
            </tbody>
        </table>
        
    </div>
</div>

如何设置溢出不影响 table 中的主行？

How can I set overflow not affecting the main row in table?

html

css

overflow