4

I want to add a scroll bar when the html table body overflows.I do not want to scroll the table header. I have these html and css codes in my oracle apex page

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;
}

But with this code, the table header is also scrolling. This was referenced from SO answer How to display scroll bar onto a html table. Can anybody help me to find out the error in this code?

Improve this question
5
  • Either remove th or .t-Report-colHead from your CSS because those are targeting the same elements.
    – jayly
    Commented Mar 9, 2018 at 7:24
  • Thanks, but the headings are now overlapping.The heading 'head' is displayed over the heading 'code'.
    – Nidheesh
    Commented Mar 9, 2018 at 7:27
  • According to the link you provided, you should wrap your <th> text content in <span> and then target those in the CSS. So something like <th id="CODE" align="center"><span class="t-Report-colHead">Code</th>.
    – jayly
    Commented Mar 9, 2018 at 7:31
  • ya.got it. I added the span. Now it is ok and working fine. Thank you sir.
    – Nidheesh
    Commented Mar 9, 2018 at 7:33
  • 1
    Awesome! I'll go ahead and add this as an answer. :)
    – jayly
    Commented Mar 9, 2018 at 7:36

5 Answers 5

Reset to default
2

Update your th HTML to include a span:

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

And edit your CSS selectors to remove the repetitive th:

.t-Report-tableWrap table thead .t-Report-colHead
Improve this answer
1

Your code is incorrect as you added an extra space between th and .t-Report-colHead in .t-Report-tableWrap table thead th .t-Report-colHead {

However, here is a working code.

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

thead{
  display: block;
}

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

CODEPEN

Hope this helps.

Improve this answer
2
  • 1
    works but I have to apply width:100%, when table row is less than 100% the scroll bar stands at the left most point.
    – Nidheesh
    Commented Mar 9, 2018 at 8:28
  • 1
    Glad that I could help. You may choose the right answer so that it would help other users. Thank you.
    – Gibin Ealias
    Commented Mar 9, 2018 at 9:13
1

Set height and add overflow:auto; to .t-Report-tableWrap tbody instead of .t-Report-tableWrap so that the scrolling will only effect 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;
}

Hope this helps.

Improve this answer
1

Change css code 

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>

Improve this answer
0

I think apex has a setup for this, see this example:

Without the setting: https://apex.oracle.com/pls/apex/f?p=145797:1

With the setting: https://apex.oracle.com/pls/apex/f?p=145797:12

Go to Report Attributes: enter image description here

Improve this answer
1
  • This is for interacrtive report , But I'm using tabular form.
    – Nidheesh
    Commented Mar 9, 2018 at 7:41

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.