HTML表溢出不工作

我想在html表体溢出时添加一个滚动条。我不想滚动表头。我的oracle apex页面中有这些html和css代码

HTML

<div class="t-Report-wrap">
<div class="t-Report-tableWrap">
    <table class="t-Report-report" summary="tab">
        <thead>
            <tr>
                <th class="t-Report-colHead" id="CODE" align="center">Code</th>
                <th class="t-Report-colHead" id="HEAD" align="center">Head</th>
            </tr>
        </thead>            
        <tbody>
            <tr> <td > 5198 </td><td >SUSPENCE </td></tr>
            <tr> <td > 1308 </td><td >SHARE IN KNR</td></tr>
            <tr> <td > 4803 </td><td >ONE TIME </td></tr>
            <tr><td >6021</td><td >NEETHI GOODS </td></tr>
            <tr><td >6022</td><td >MANNURE STOCK </td></tr>
            <tr><td >4832</td><td >DONATION TO </td></tr>
            <tr><td >5218</td><td >CALANDER </td></tr>
            <tr><td >4829</td><td >BUILDING TAX </td></tr>
            <tr><td >5199</td><td >BICYCLE ADVANCE </td></tr>
            <tr><td >2509</td><td >BANK LOAN LT MI(SPL) </td></tr>
        </tbody>
    </table>
</div>
<div class="t-Report-links"></div>
<table class="t-Report-pagination t-Report-pagination--bottom" role="presentation"></table> 
</div>

---

但是有了这段代码，表头也会滚动。这是从SO答案中引用的。有人能帮我找出这个代码中的错误吗？

设置高度并添加

溢出：自动

改为

.t-Report-tableWrap-tbody

而不是

.t-Report-tableWrap

，这样滚动只会影响表体

.t-Report-wrap{
位置：相对位置；
}
.t-Report-tableWrap{
边缘顶部：20px；
}
.t-Report-tableWrap表{
宽度：100%；
}
.t-Report-table包装表THAD.t-Report-colHead{
位置：绝对位置；
顶部：-20px；
z指数：2；
高度：20px；
宽度：35%；
边框：1px纯红；
}
.t-Report-tableWrap t车身{
高度：180像素；
溢出：自动；
}

更改css代码

t车身{
显示：块；
高度：200px；
溢出：自动；
}
thead，tbody tr{
显示：表格；
宽度：100%；
表布局：固定；/*偶数列宽度，也固定表的宽度*/
}
泰德{
宽度：计算（100%-1em）/*滚动条的平均宽度为1em/16px，请将其从AD宽度中删除*/
}
报告{
宽度：400px；
}

代码
头
5198
怀疑
1308
KNR股份
4803
一次
6021
尼提商品
6022
曼努尔股票
4832
捐赠给
5218
炉卷
4829
建筑税
5199
自行车前进
2509
银行贷款管理局（SPL）

我认为apex对此有一个设置，请参见以下示例：

没有设置：

使用以下设置：

转到报告属性：

---

更新您的

th

HTML以包含

span

：

<th id="CODE" align="center"><span class="t-Report-colHead">Code</span></th>

---

您的代码不正确，因为您在

.t-Report-tableWrap table thead th.t-Report-colHead{

但是，这里有一个工作代码

tr{
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead{
  display: block;
}

tbody{
  display: block;
  height: 180px;
  overflow: auto;
}

---

希望这有帮助。

从CSS中删除

th

或

.t-Report-colHead

，因为它们的目标是相同的元素。谢谢，但是标题现在重叠了。标题“head”显示在标题“code”上。根据您提供的链接，您应该将

文本内容包装在

然后针对CSS中的那些。所以类似于

code

.ya。明白了。我添加了span。现在它正常工作了。谢谢你，先生。太棒了！我会继续添加它作为答案。：）这是用于交互式报告，但我使用表格形式。工作正常，但我必须应用宽度：100%，当表格行小于滚动条的100%时ds在最左边。很高兴我能帮助你。你可以选择正确的答案，这样它将帮助其他用户。谢谢。

.t-Report-tableWrap table thead .t-Report-colHead

tr{
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead{
  display: block;
}

tbody{
  display: block;
  height: 180px;
  overflow: auto;
}