html - 粘性 HTML 表头，并排，可滚动的 div

问题描述

我正在构建一个视图，该视图具有两个并排在可滚动 div 内的表。两个表具有相同的高度和相同的行数。目前，两个表格同时滚动。

我想要的是让两个表格标题都保持粘性并在同步滚动两个表格主体时保持可见。

这些表格显示在有角度的材料垫对话框窗口中。

一些示例代码：

<div mat-dialog-content class="card-content-view-mode">
<div class="container-fluid">
    <div class="row">
        <div class="col-6">
            <div class="table-container">
                <table role="table" class="table leftTable">
                    <thead>
                        <th role="col" style="min-width: 100px;">Col 1</th>
                        <th role="col" style="min-width: 100px;">Col 2</th>
                        <th role="col" style="min-width: 110px;">Col 3</th>
                        <th role="col" style="min-width: 100px;">Col 4</th>
                        <th role="col" style="min-width: 100px;">Col 5</th>
                        <th role="col" style="min-width: 100px;">Col 6</th>
                        <th role="col" style="min-width: 100px;">Col 7</th>
                    </thead>
                    <tbody>
                        <tr *ngFor="...">
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="col-6">
            <div class="table-container">
                <table role="table" class="table rightTable">
                    <thead>
                        <th role="col" style="min-width: 100px;">Col 1</th>
                        <th role="col" style="min-width: 100px;">Col 2</th>
                        <th role="col" style="min-width: 110px;">Col 3</th>
                        <th role="col" style="min-width: 100px;">Col 4</th>
                        <th role="col" style="min-width: 100px;">Col 5</th>
                        <th role="col" style="min-width: 100px;">Col 6</th>
                        <th role="col" style="min-width: 100px;">Col 7</th>
                    </thead>
                    <tbody>
                        <tr *ngFor="...">
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

到目前为止我的 CSS 样式：

.table-container {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  overflow-x: scroll;
  border-radius: 10px;
}

有没有一种简单的 CSS 方法来指定，也许是使用 sticky 属性，让两个表头都是粘性的，并在table-container滚动时保持在 div 的顶部？

到目前为止，我还没有找到任何符合我确切用例的在线示例，所以我转向这里寻求帮助。

标签： htmlcsstwitter-bootstrapbootstrap-4angular-material

html - 粘性 HTML 表头，并排，可滚动的 div

问题描述

解决方案

推荐阅读