Html 滚动表格时是否保持表格标题不动？

我在一个模型对话框中有一个下表，我已经应用了一些css，这样头部在滚动时保持在相同的位置

但是，在我加载页面后，列被推到左侧，这5列应该出现在标题下

同时，基础页面也被推到页面的左侧

               <style>
                    .tblSearchMedia1 tbody {
                    height: 100px;
                    overflow: auto;
                        }
                    .tblSearchMedia1 td {
                    padding: 3px 10px;
                    }

                    .tblSearchMedia1 thead > tr, tbody{
                    display:block;

                    }
                </style>


                <table class="tblSearchMedia1">
                <thead>
                    <tr>
                        <th> Region </th>
                        <th> Subregion </th>
                        <th> Country </th>
                        <th> Media Type </th>
                        <th> Media Name </th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: MediaGroups">
                    <tr>
                        <td data-bind="text: ID"></td>
                        <td data-bind="text: ID"></td>
                        <td data-bind="text:ID"></td>
                        <td data-bind="text: ID"></td>
                        <td data-bind="text: ID"></td>
                    </tr>
                </tbody>
            </table>

.tblSearchMedia1 t车身{
高度：100px；
溢出：自动；
}
.tblSearchMedia1 td{
填充：3x10px；
}
.tblSearchMedia1 thead>tr，tbody{
显示：块；
}
区域
次区域
国家
媒体类型
媒体名称

---

检查这是否解决了您的问题：

---

所以我改变了你的CSS，只是为了便于举例，使用了通用选择器

body {
    margin: 0;
    padding: 0;
}
table {
    border-collapse:collapse;
}
th, td {
    border:1px solid black;
}
.tblSearchMedia1 thead {
    position: absolute;
    width: 525px;
}
.tblSearchMedia1 tbody {
    width: 525px;
    height: 100px;
    overflow: auto;
}
.tblSearchMedia1 th {
    background: #000000;
    color: #ffffff;
}
.tblSearchMedia1 tbody {
    position:absolute;
    top: 50px;
}
.tblSearchMedia1 th, td {
    width: 75px;
    padding: 3px 10px;
    text-align: center;
}

我指定了设置宽度，并将thead位置设置为fixed

这是工作小提琴

更新了fiddle，以防止父DOM滚动时标头浮动

---

这把小提琴是否显示了你的问题？不，我已经添加了一个原始图像的链接，明白了！我很确定问题出在你的

显示：块我打赌如果你删除它，它会排成一行，但我也相信这会删除滚动。我会继续考虑的。看看这里：–这可能会对您有所帮助。如果我滚动主窗口，标题会保留在屏幕上的一个位置，并移出jquery对话框。@xerxes修复，请参阅new fiddle。使用了
absolute
而不是
fixed
和
blocked
。我发现了另一个问题，如果一列的字符串长度超过了td，它会将其从标题边界中推出，您能解决这个问题吗？如果是，那么我会选择您的作为正确答案。@Xerxes立即看起来可能存在填充问题。我看看能不能把它复制到我的小提琴上。这里是一个新的小提琴与一些较长的文字的地方。你能用这把小提琴重复这个问题吗？我猜在您的代码中，我使用的CSS与您的不一样或被覆盖@xerxes确保您的CSS中有这一行
.tblSearchMedia1 th，td{width:75px；padding:3px 10px；}
它使单元格保持相同的宽度，并沿文字环绕。
body {
    margin: 0;
    padding: 0;
}
table {
    border-collapse:collapse;
}
th, td {
    border:1px solid black;
}
.tblSearchMedia1 thead {
    position: absolute;
    width: 525px;
}
.tblSearchMedia1 tbody {
    width: 525px;
    height: 100px;
    overflow: auto;
}
.tblSearchMedia1 th {
    background: #000000;
    color: #ffffff;
}
.tblSearchMedia1 tbody {
    position:absolute;
    top: 50px;
}
.tblSearchMedia1 th, td {
    width: 75px;
    padding: 3px 10px;
    text-align: center;
}