HTML table 溢出无效

Question

我想在 html table body overflows.I 不想滚动的时候添加滚动条 table header .我的 Oracle 顶点页面

中有这些 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;
}

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

Answer 1

设置高度并将overflow:auto;添加到.t-Report-tableWrap tbody而不是.t-Report-tableWrap，这样滚动只会影响table body。

.t-Report-wrap {
    position: relative;
}
.t-Report-tableWrap {  
    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;
}
.t-Report-tableWrap tbody{
    height:180px;
    overflow:auto;
}

希望对您有所帮助。

Answer 2

更改css代码

tbody {
    display:block;
    height:200px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
t-Report-report {
    width:400px;
}

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <div class="t-Report-wrap">
  <div class="t-Report-tableWrap">
   <table class="t-Report-report" summary="tab">
    <thead>
     <tr>
      <th align="center" class="t-Report-colHead" id="CODE">Code</th>
      <th align="center" class="t-Report-colHead" id="HEAD">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>
</body>
</html>

Answer 3

我认为 apex 对此有设置，请参阅此示例：

没有设置： https://apex.oracle.com/pls/apex/f?p=145797:1

随着设置： https://apex.oracle.com/pls/apex/f?p=145797:12

转到报告属性：

Answer 4

更新您的 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

Answer 5

您的代码不正确，因为您在 .t-Report-tableWrap table thead th .t-Report-colHead {

中的 th 和 .t-Report-colHead 之间添加了一个额外的 space

但是，这是一个工作代码。

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

thead{
  display: block;
}

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

CODEPEN

希望这对您有所帮助。

HTML table 溢出无效

HTML table overflow not working

html

css

html-table

overflow

oracle-apex