HTML 表格溢出不起作用

Question

我想在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>

CSS

.t-Report-wrap {
    position: relative;
}
.t-Report-tableWrap {
    height:180px;
    overflow:auto;  
    margin-top:20px;
}
.t-Report-tableWrap table {
    width:100%;
}
.t-Report-tableWrap table thead th .t-Report-colHead {
    position:absolute;   
    top:-20px;
    z-index:2;
    height:20px;
    width:35%;
    border:1px solid red;
}

但是使用这段代码，表头也是滚动的。这是从 SO answer How to display scroll bar onto a html table 中引用的.谁能帮我找出这段代码中的错误？

Answer 1

更新您的 th HTML 以包含 span:

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

并编辑您的 CSS 选择器以删除重复的 th:

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