I am facing problem while setting tbody height width overflow scroll.
<style>
tbody{
height:50px;display:block;overflow:scroll
}
</style>
<h3>Table B</h3>
<table style="border: 1px solid red;width:300px;display:block">
<thead>
<tr>
<td>Name</td>
<td>phone</td>
</tr>
</thead>
<tbody style='height:50px;display:block;overflow:scroll'>
<tr>
<td>AAAA</td>
<td>323232</td>
</tr>
<tr>
<td>BBBBB</td>
<td>323232</td>
</tr>
<tr>
<td>CCCCC</td>
<td>3435656</td>
</tr>
</tbody>
</table>
Visit my fiddle here
I want table B like Table A with overflow scroll.
Any help will be appreciated.
Many Thanks,
M.
If you want tbody to show a scrollbar, set its display: block;.
Set display: table; for the tr so that it keeps the behavior of a table.
To evenly spread the cells, use table-layout: fixed;.
DEMO
CSS:
table, tr td {
border: 1px solid red
}
tbody {
display: block;
height: 50px;
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 */
}
table {
width: 400px;
}
If tbody doesn't show a scroll, because content is less than height or max-height, set the scroll any time with: overflow-y: scroll;. DEMO 2
<editS/updateS> 2019 - 04/2021
Important note: this approach to making a table scrollable has drawbacks in some cases. (See comments below.) some of the duplicate answers in this thread deserves the same warning by the way
WARNING: this solution disconnects the thead and tbody cell grids; which means that in most practical cases, you will not have the cell alignment you expect from tables. Notice this solution uses a hack to keep them sort-of aligned: thead { width: calc( 100% - 1em ) }
Anyhow, to set a scrollbar, a display reset is needed to get rid of the table-layout (which will never show scrollbar).
Turning the <table> into a grid via display:grid/contents will also leave a gap in between header and scrollable part, to mind about. (idem if built from divs)
overflow:overlay; has not yet shown up in Firefox ( keep watching it)
position:sticky will require a parent container which can be the scrolling one. make sure your thead can be sticky if you have a few rows and rowspan/colspan headers in it (it does not with chrome).
So far, there is no perfect solution yet via CSS only. there is a few average ways to choose along so it fits your own table (table-layout:fixed; is .. fixing table and column's width, but javascript could probably be used to reset those values => exit pure CSS)
Another approach is to wrap your table in a scrollable element and set the header cells to stick to the top.
The advantage of this approach is that you don't have to change the display on tbody and you can leave it to the browser to calculate column width while keeping the header cell widths in line with the data cell column widths.
/* Set a fixed scrollable wrapper */
.tableWrap {
height: 200px;
border: 2px solid black;
overflow: auto;
}
/* Set header to stick to the top of the container. */
thead tr th {
position: sticky;
top: 0;
}
/* If we use border,
we must use table-collapse to avoid
a slight movement of the header row */
table {
border-collapse: collapse;
}
/* Because we must set sticky on th,
we have to apply background styles here
rather than on thead */
th {
padding: 16px;
padding-left: 15px;
border-left: 1px dotted rgba(200, 209, 224, 0.6);
border-bottom: 1px solid #e8e8e8;
background: #ffc491;
text-align: left;
/* With border-collapse, we must use box-shadow or psuedo elements
for the header borders */
box-shadow: 0px 0px 0 2px #e8e8e8;
}
/* Basic Demo styling */
table {
width: 100%;
font-family: sans-serif;
}
table td {
padding: 16px;
}
tbody tr {
border-bottom: 2px solid #e8e8e8;
}
thead {
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
}
tbody tr:hover {
background: #e6f7ff;
}
<div class="tableWrap">
<table>
<thead>
<tr>
<th><span>Month</span></th>
<th>
<span>Event</span>
</th>
<th><span>Action</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>February. An extra long string.</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>March</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>April</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>May</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>June</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>July</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>August</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>September</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>October</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>November</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>December</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
</tbody>
</table>
</div>
It is simple way to use scroll bar to table body
/* It is simple way to use scroll bar to table body*/
table tbody {
display: block;
max-height: 300px;
overflow-y: scroll;
}
table thead, table tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
<table>
<thead>
<th>Invoice Number</th>
<th>Purchaser</th>
<th>Invoice Amount</th>
<th>Invoice Date</th>
</thead>
<tbody>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
</tbody>
</table>
By default overflow does not apply to table group elements unless you give a display:block to <tbody> also you have to give a position:relative and display: block to <thead>. Check the DEMO.
.fixed {
width:350px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed th {
text-decoration: underline;
}
.fixed th,
.fixed td {
padding: 5px;
text-align: left;
min-width: 200px;
}
.fixed thead {
background-color: red;
color: #fdfdfd;
}
.fixed thead tr {
display: block;
position: relative;
}
.fixed tbody {
display: block;
overflow: auto;
width: 100%;
height: 100px;
overflow-y: scroll;
overflow-x: hidden;
}
Simplest of all solutions:
Add the below code in CSS:
.tableClassName tbody {
display: block;
max-height: 200px;
overflow-y: scroll;
}
.tableClassName thead, .tableClassName tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
.tableClassName thead {
width: calc( 100% - 1.1em );
}
1.1 em is the average width of the scroll bar, please modify this if needed.
Based on this answer, here's a minimal solution if you're already using Bootstrap:
div.scrollable-table-wrapper {
height: 500px;
overflow: auto;
thead tr th {
position: sticky;
top: 0;
}
}
<div class="scrollable-table-wrapper">
<table class="table">
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>
Tested on Bootstrap v3
Change your second table code like below.
<table style="border: 1px solid red;width:300px;display:block;">
<thead>
<tr>
<td width=150>Name</td>
<td width=150>phone</td>
</tr>
</thead>
<tbody style='height:50px;overflow:auto;display:block;width:317px;'>
<tr>
<td width=150>AAAA</td>
<td width=150>323232</td>
</tr>
<tr>
<td>BBBBB</td>
<td>323232</td>
</tr>
<tr>
<td>CCCCC</td>
<td>3435656</td>
</tr>
</tbody>
</table>
JSFIDDLE DEMO
In my case I wanted to have responsive table height instead of fixed height in pixels as the other answers are showing. To do that I used percentage of visible height property and overflow on div containing the table:
&__table-container {
height: 70vh;
overflow: scroll;
}
This way the table will expand along with the window being resized.
HTML:
<table id="uniquetable">
<thead>
<tr>
<th> {{ field[0].key }} </th>
<th> {{ field[1].key }} </th>
<th> {{ field[2].key }} </th>
<th> {{ field[3].key }} </th>
</tr>
</thead>
<tbody>
<tr v-for="obj in objects" v-bind:key="obj.id">
<td> {{ obj.id }} </td>
<td> {{ obj.name }} </td>
<td> {{ obj.age }} </td>
<td> {{ obj.gender }} </td>
</tr>
</tbody>
</table>
CSS:
#uniquetable thead{
display:block;
width: 100%;
}
#uniquetable tbody{
display:block;
width: 100%;
height: 100px;
overflow-y:overlay;
overflow-x:hidden;
}
#uniquetable tbody tr,#uniquetable thead tr{
width: 100%;
display:table;
}
#uniquetable tbody tr td, #uniquetable thead tr th{
display:table-cell;
width:20% !important;
overflow:hidden;
}
this will work as well:
#uniquetable tbody {
width:inherit !important;
display:block;
max-height: 400px;
overflow-y:overlay;
}
#uniquetable thead {
width:inherit !important;
display:block;
}
#uniquetable tbody tr, #uniquetable thead tr {
display:inline-flex;
width:100%;
}
#uniquetable tbody tr td, #uniquetable thead tr th {
display:block;
width:20%;
border-top:none;
text-overflow: ellipsis;
overflow: hidden;
max-height:400px;
}
Making scrolling tables is always a challenge. This is a solution where the table is scrolled both horizontally and vertically with fixed height on tbody making theader and tbody "stick" (without display: sticky). I've added a "big" table just to show.
I got inspiration from G-Cyrillus to make the tbody display:block;
But when it comes to width of a cell (both in header and body), it's depending on the inside content. Therefore I added content with specific width inside each cell, both in thead and minimum first row in tbody (the other rows adapt accordingly)
.go-wrapper {
overflow-x: auto;
width: 100%;
}
.go-wrapper table {
width: auto;
}
.go-wrapper table tbody {
display: block;
height: 220px;
overflow: auto;
}
.go-wrapper table thead {
display: table;
}
.go-wrapper table tfoot {
display: table;
}
.go-wrapper table thead tr,
.go-wrapper table tbody tr,
.go-wrapper table tfoot tr {
display: table-row;
}
.go-wrapper table th,
.go-wrapper table td {
white-space: nowrap;
}
.go-wrapper .aw-50 { min-height: 1px; width: 50px; }
.go-wrapper .aw-100 { min-height: 1px; width: 100px; }
.go-wrapper .aw-200 { min-height: 1px; width: 200px; }
.go-wrapper .aw-400 { min-height: 1px; width: 400px; }
/***** Colors *****/
.go-wrapper table {
border: 2px solid red
}
.go-wrapper table thead,
.go-wrapper table tbody,
.go-wrapper table tfoot {
outline: 1px solid green
}
.go-wrapper td {
outline: 1px solid blue
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Template</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="row mt-5 justify-content-md-center">
<div class="col-8">
<div class="go-wrapper">
<table class="table">
<thead>
<tr>
<th><div class="aw-50" ><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></th>
<th><div class="aw-200">Name</div></th>
<th><div class="aw-50" >Week</div></th>
<th><div class="aw-100">Date</div></th>
<th><div class="aw-100">Time</div></th>
<th><div class="aw-200">Project</div></th>
<th><div class="aw-400">Text</div></th>
<th><div class="aw-200">Activity</div></th>
<th><div class="aw-50" >Hours</th>
<th><div class="aw-50" >Pause</div></th>
<th><div class="aw-100">Status</div></th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="aw-50"><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></td>
<td><div class="aw-200">AAAAA</div></td>
<td><div class="aw-50" >15</div></td>
<td><div class="aw-100">07.04.2020</div></td>
<td><div class="aw-100">10:00</div></td>
<td><div class="aw-200">Project 1</div></td>
<td><div class="aw-400">Blah blah blah</div></td>
<td><div class="aw-200">Activity</div></td>
<td><div class="aw-50" >2t</div></td>
<td><div class="aw-50" >30min</div></td>
<td><div class="aw-100">Waiting</div></td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>BBBBB</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>CCCCC</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah Blah blah blah</td>
<td>Activity Activity Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>DDDDD</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>EEEEE</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>FFFFF</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity Activity Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>GGGGG</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>HHHHH</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>IIIII</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>JJJJJ</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>KKKKK</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>LLLLL</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>MMMMM</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>NNNNN</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>OOOOO</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>PPPPP</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>QQQQQ</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>RRRRR</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>SSSSS</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>TTTTT</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>UUUUU</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>VVVVV</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>XXXXX</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>YYYYY</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>ZZZZZ</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>ÆÆÆÆÆ</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>ØØØØØ</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>ÅÅÅÅÅ</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
</tbody>
<tfoot>
<tr>
<th><div class="aw-50" ><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></th>
<th><div class="aw-200">Name</div></th>
<th><div class="aw-50" >Week</div></th>
<th><div class="aw-100">Date</div></th>
<th><div class="aw-100">Time</div></th>
<th><div class="aw-200">Project</div></th>
<th><div class="aw-400">Text</div></th>
<th><div class="aw-200">Activity</div></th>
<th><div class="aw-50" >Hours</th>
<th><div class="aw-50" >Pause</div></th>
<th><div class="aw-100">Status</div></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I know this is an old question but I stumbled across it when attempting to make a sticky header & footer. I found this post with a simple solution that seems to work well for what I need.
table thead,
table tfoot {
position: sticky;
}
table thead {
inset-block-start: 0; /* "top" */
}
table tfoot {
inset-block-end: 0; /* "bottom" */
}
I guess what you're trying to do, is to keep the header fixed and to scroll the body content.
You can scroll the content into 2 directions:
horizontally: you won't be able to scroll the content horizontally unless you use a slider (a jQuery slider for example). I would recommend to avoid using a table in this case.
vertically: you won't be able to achieve that with a tbody tag, because assigning display:block or display:inline-block will break the layout of the table.
Here's a solution using divs: JSFiddle
HTML:
<div class="wrap_header">
<div class="column">
Name
</div>
<div class="column">
Phone
</div>
<div class="clearfix"></div>
</div>
<div class="wrap_body">
<div class="sliding_wrapper">
<div class="serie">
<div class="cell">
AAAAAA
</div>
<div class="cell">
323232
</div>
<div class="clearfix"></div>
</div>
<div class="serie">
<div class="cell">
BBBBBB
</div>
<div class="cell">
323232
</div>
<div class="clearfix"></div>
</div>
<div class="serie">
<div class="cell">
CCCCCC
</div>
<div class="cell">
3435656
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
CSS:
.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
.sliding_wrapper {overflow-y:scroll; overflow-x:none;}
.sliding_wrapper,
.wrap_body {height:45px;}
.wrap_header,
.wrap_body {overflow:hidden;}
.column {width:100px; float:left; border:1px solid red;}
.cell {width:100px; float:left; border:1px solid red;}
/**
* #info Clearfix: clear all the floated elements
*/
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {display:inline-table;}
/**
* #hack Display the Clearfix as a block element
* #hackfor Every browser except IE for Macintosh
*/
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
Explanation:
You have a sliding wrapper which will contain all the data.
Note the following:
.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
There's a difference of 17px because we need to take into consideration the width of the scrollbar.
Webkit seems to use internally display: table-row-group for the tbody tag.
There is currently a bug with setting height to it: https://github.com/w3c/csswg-drafts/issues/476
Let's hope it will be solved soon.
Just found a cool solution using grid!
This is what I used and it worked out perfectly:
tbody tr, thead tr {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; // or whatever division you wanna do
}
tbody {
height: 300px; // or whatever height
width: 100%;
overflow-y: auto;
display: block;
}
Demo:
https://codesandbox.io/s/table-with-inner-body-scroll-hggq7x
I was looking for the same solution for my project. This is how I did it.
The data is taken from one of the answers above for demonstration purpose.
.tableContainer {
max-height: 150px;
overflow-y: scroll;
padding: 0;
margin: 0;
border: 1px solid black;
width: 100%;
}
table {
width: 100%;
}
thead {
position: sticky;
top: 0px;
background-color: white;
}
/* for styling only */
td {
border: 1px solid black;
}
<div class="tableContainer">
<table>
<thead>
<th>Invoice Number</th>
<th>Purchaser</th>
<th>Invoice Amount</th>
<th>Invoice Date</th>
</thead>
<tbody>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
</tbody>
</table>
</div>
Here is a good example for table scrolling across x and y way.
Horizontal and vertical scrolling is the best thing for responsive table.
table, th, tr, td {
border: 1px solid lightgrey;
border-collapse: collapse;
}
tbody {
max-height: 200px;
max-width: 200px;
overflow: auto;
display: block;
table-layout: fixed;
}
tr {
display: table;
}
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
Related
I followed a CSS Tricks tutorial to get a table with a sticky header and first column, and tried adding a Bootstrap dropdown inside of the first column.
Problem is, the dropdown shows up in front of the parent cell but behind all of the others of the first column:
I've tried changing the position of the cell to relative, switching the z-index of the dropdown menu to a higher value but the dropdown is still behind the first column.
Here's a JSFiddle with a minimum, reproducible example: https://jsfiddle.net/maxencelav/hwsrcmL6/14/
#import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,wght#0,700;1,200&display=swap");
table {
font-family: "Fraunces", serif;
font-size: 125%;
white-space: nowrap;
margin: 3px;
border: none;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
border: 1px solid black;
}
table td,
table th {
border: 1px solid black;
padding: 0.5rem 1rem;
}
table thead th {
padding: 3px;
position: sticky;
top: 0;
z-index: 1;
width: 25vw;
background: white;
}
table td {
background: #fff;
padding: 4px 5px;
text-align: center;
}
table tbody th {
font-weight: 100;
font-style: italic;
text-align: left;
position: relative;
}
table thead th:first-child {
position: sticky;
left: 0;
z-index: 2;
}
table tbody th {
position: sticky;
left: 0;
background: white;
z-index: 1;
}
caption {
text-align: left;
padding: 0.25rem;
position: sticky;
left: 0;
}
[role="region"][aria-labelledby][tabindex] {
width: 100%;
max-height: 98vh;
overflow: auto;
}
#team-cell-container {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
margin: 0;
gap: 5px;
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<!-- Based off https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column/ -->
<table>
<thead>
<tr>
<th>Teams</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>Runs</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<div id="team-cell-container">
Milwaukee Brewers
<div class="dropdown">
<i class="fa fa-cog" type="button" id="dropdown-item" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
<div class="dropdown-menu" aria-labelledby="dropdown-item">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</th>
<td>2</td>
<td>1</td>
<td>4</td>
<td>0</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>13</td>
</tr>
<tr>
<th>Los Angles Dodgers</th>
<td>4</td>
<td>2</td>
<td>0</td>
<td>0</td>
<td>3</td>
<td>2</td>
<td>4</td>
<td>2</td>
<td>3</td>
<td>20</td>
</tr>
<tr>
<th>New York Mets</th>
<td>0</td>
<td>1</td>
<td>2</td>
<td>0</td>
<td>0</td>
<td>2</td>
<td>4</td>
<td>0</td>
<td>3</td>
<td>12</td>
</tr>
<tr>
<th>St. Louis Cardinals</th>
<td>3</td>
<td>4</td>
<td>1</td>
<td>3</td>
<td>2</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>3</td>
<td>25</td>
</tr>
</tbody>
</table>
This is problem with CSS position and z-index. It was explained by this question. (Or see my testing).
To make position: absolute with high z-index appears on top of other relative, you have to set z-index of the others to be lower than z-index of the parent dropdown . This confirmed work by this answer.
First, add some identity to your table.
<!-- Based off https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column/ -->
<table id="my-table">
<thead>
<tr>
<th>Teams</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>Runs</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<div id="team-cell-container">
Milwaukee Brewers
<div class="dropdown">
<i class="fa fa-cog" type="button" id="dropdown-item" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
<div class="dropdown-menu" aria-labelledby="dropdown-item">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</th>
<td>2</td>
<td>1</td>
<td>4</td>
<td>0</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>13</td>
</tr>
<tr>
<th>Los Angles Dodgers</th>
<td>4</td>
<td>2</td>
<td>0</td>
<td>0</td>
<td>3</td>
<td>2</td>
<td>4</td>
<td>2</td>
<td>3</td>
<td>20</td>
</tr>
<tr>
<th>New York Mets</th>
<td>0</td>
<td>1</td>
<td>2</td>
<td>0</td>
<td>0</td>
<td>2</td>
<td>4</td>
<td>0</td>
<td>3</td>
<td>12</td>
</tr>
<tr>
<th>St. Louis Cardinals</th>
<td>3</td>
<td>4</td>
<td>1</td>
<td>3</td>
<td>2</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>3</td>
<td>25</td>
</tr>
<tr>
<th>Houston Astros</th>
<td>3</td>
<td>2</td>
<td>1</td>
<td>4</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>20</td>
</tr>
<tr>
<th>Toronto Blue Jays</th>
<td>2</td>
<td>4</td>
<td>4</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>1</td>
<td>22</td>
</tr>
<tr>
<th>Boston Red Sox</th>
<td>4</td>
<td>4</td>
<td>4</td>
<td>0</td>
<td>3</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>17</td>
</tr>
<tr>
<th>Chicago Cubs</th>
<td>1</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>0</td>
<td>4</td>
<td>12</td>
</tr>
<tr>
<th>Philadelphia Phillies</th>
<td>0</td>
<td>4</td>
<td>2</td>
<td>0</td>
<td>4</td>
<td>1</td>
<td>0</td>
<td>4</td>
<td>2</td>
<td>17</td>
</tr>
<tr>
<th>Chicago White Sox</th>
<td>2</td>
<td>0</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>2</td>
<td>4</td>
<td>2</td>
<td>0</td>
<td>19</td>
</tr>
<tr>
<th>San Diego Padres</th>
<td>2</td>
<td>2</td>
<td>3</td>
<td>0</td>
<td>4</td>
<td>2</td>
<td>2</td>
<td>0</td>
<td>2</td>
<td>17</td>
</tr>
<tr>
<th>Cleveland Indians</th>
<td>1</td>
<td>0</td>
<td>0</td>
<td>3</td>
<td>2</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>0</td>
<td>11</td>
</tr>
<tr>
<th>San Francisco Giants</th>
<td>1</td>
<td>3</td>
<td>1</td>
<td>4</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>17</td>
</tr>
<tr>
<th>Cincinatti Reds</th>
<td>2</td>
<td>2</td>
<td>4</td>
<td>1</td>
<td>4</td>
<td>2</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>23</td>
</tr>
<tr>
<th>Minnesota Twins</th>
<td>4</td>
<td>4</td>
<td>1</td>
<td>0</td>
<td>2</td>
<td>0</td>
<td>3</td>
<td>1</td>
<td>3</td>
<td>18</td>
</tr>
<tr>
<th>Tampa Bay Rays</th>
<td>4</td>
<td>1</td>
<td>3</td>
<td>0</td>
<td>2</td>
<td>1</td>
<td>4</td>
<td>0</td>
<td>1</td>
<td>16</td>
</tr>
<tr>
<th>Miami Marlins</th>
<td>0</td>
<td>3</td>
<td>0</td>
<td>4</td>
<td>3</td>
<td>3</td>
<td>0</td>
<td>1</td>
<td>4</td>
<td>18</td>
</tr>
<tr>
<th>Oakland Athletics</th>
<td>3</td>
<td>3</td>
<td>2</td>
<td>0</td>
<td>4</td>
<td>2</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>15</td>
</tr>
<tr>
<th>Detroit Tigers</th>
<td>3</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>19</td>
</tr>
<tr>
<th>Pittsburgh Pirates</th>
<td>2</td>
<td>2</td>
<td>0</td>
<td>3</td>
<td>0</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>15</td>
</tr>
<tr>
<th>Seattle Mariners</th>
<td>1</td>
<td>3</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>16</td>
</tr>
<tr>
<th>Atlanta Braves</th>
<td>4</td>
<td>3</td>
<td>0</td>
<td>3</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>3</td>
<td>29</td>
</tr>
</tbody>
</table>
</div>
Then use Bootstrap dropdown events to listen on show or hide the dropdown element.
$('#my-table .dropdown').on('show.bs.dropdown', (event) => {
let thisTable = event.target.closest('table');
thisTable.classList.add('dropdowns-opened');
// add class to all <tr>
$(thisTable).find('tr').addClass('non-dropdown');
// remove class of this <tr>
event.target.closest('tr').classList.remove('non-dropdown');
});
$('#my-table .dropdown').on('hidden.bs.dropdown', (event) => {
let thisTable = event.target.closest('table');
thisTable.classList.remove('dropdowns-opened');
$(thisTable).find('tr').removeClass('non-dropdown');
});
The JavaScript above will add and remove class when dropdown element show or hide.
Now, add some CSS class to make dropdown appears on top of other.
table.dropdowns-opened tbody tr.non-dropdown th {
z-index: 0;
}
See it in action on JsFiddle.
You maybe change your current z-index: 1 to 2 and use the class above from z-index: 0 to 1 if the sticky functional is not work as expected.
trying to put scrollbar to my table i put it but its very far away from table. how can i put it near the table
.html
<h1> ASSET TABLE </h1>
<div class="table">
<div class = "overflow-auto">
{% render_table table_assets %}
</div>
</div>
<h1>TASK TABLE </h1>
<div class="table">
{% render_table table_tasks %}
</div>
.css
.overflow-auto {
height: 150px;
overflow-y: scroll;
overflow: auto;
}
it seems like that
You have to set a width for the parent div.
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
Block-level elements
#container {
overflow-y: scroll;
max-width: 500px;
max-height: 200px;
}
table {
width: 100%;
}
<div id='container'>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
I want to fix table thead in angular when it gets top page. When I scroll inside table scrolling thead is fixing and this situation I use sticky but when I scroll browser page it doesn't work. Bellow a image what exactly I want
enter image description here
in html
<div class="table-responsive " style="width: 100%; height: 670px;">
<!--<table class="table table-striped table-bordered">-->
<table class="table table-hover info">
<thead>
<tr style="background-color: lightskyblue;">
<th>ID</th>
<!--<th jhiTranslate="jhiApp.kassa.date_enter">DateEnter</th>-->
<th jhiTranslate="jhiApp.kassa.date_prov">DateProv</th>
<th jhiTranslate="jhiApp.kassa.date_doc">DateDoc</th>
<th jhiTranslate="jhiApp.kassa.num_doc">NumDoc</th>
<th jhiTranslate="jhiApp.kassa.acc_db">AccDb</th>
<th jhiTranslate="jhiApp.kassa.bank_db">BankDb</th>
<th jhiTranslate="jhiApp.kassa.name_db">NameDb</th>
<th jhiTranslate="jhiApp.kassa.acc_cr">AccCr</th>
<th jhiTranslate="jhiApp.kassa.bank_cr">BankCr</th>
<th jhiTranslate="jhiApp.kassa.name_cr">NameCr</th>
<th jhiTranslate="jhiApp.kassa.currency">Currency</th>
<th jhiTranslate="jhiApp.kassa.summa">Summa</th>
<th jhiTranslate="jhiApp.kassa.summa_eq">SummaEq</th>
<th jhiTranslate="jhiApp.kassa.purpose">Purpose</th>
<th jhiTranslate="jhiApp.kassa.inn_db">InnDb</th>
<th jhiTranslate="jhiApp.kassa.inn_cr">InnCr</th>
</tr>
</thead>
<tbody *ngFor="let array of kassas">
</tbody>
</table>
</div>
in css
thead th {
position: sticky;
top: 0;
background-color: lightskyblue;
}
Maybe this code be usefull
thead th{
background-color: lightskyblue;
}
thead {
position: sticky;
top: 0;
}
.table-responsive {
max-height: 400px;
overflow: auto;
position: sticky;
top: 0;
background-color: #fff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<h1>Table</h1>
<div class="table-responsive " style="width: 100%; height: 670px;">
<!--<table class="table table-striped table-bordered">-->
<table class="table table-hover info">
<thead>
<tr>
<th>ID</th>
<!--<th jhiTranslate="jhiApp.kassa.date_enter">DateEnter</th>-->
<th jhiTranslate="jhiApp.kassa.date_prov">DateProv</th>
<th jhiTranslate="jhiApp.kassa.date_doc">DateDoc</th>
<th jhiTranslate="jhiApp.kassa.num_doc">NumDoc</th>
<th jhiTranslate="jhiApp.kassa.acc_db">AccDb</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
Scrolling <tbody> with fixed <thead> (well in your case, sticky <thead>) is a log discussed thread.
See the answers to enter link description here, especially this one
If that does not help, see this sticky implementation here and try not to use table but other html tags like for instance plain <div>s and style accordingly. I've seen the example uses description list tags.
I've had a similar situation (with the need for fixed <thead>) so I ended up with this approach. My case implied the material lib but it does not matter the approach of scrolling the "table" body is the same.
You can try my new Angular sticky library. I created it because I missed such functionality and no solutions worked for me. https://ngx-sticky-copy.netlify.app/ It is easy, you only apply *scStickyThead directive on tHead and you go.
I have a css class on table <tr> tags but i want to stop it from being added on one <td>
is this possible? can i add a seperate class to the specific <td> to stop the <tr>'s class being added?
You could use the :not selector (which you can use to filter all bar the selector within the brackets):
table td:not(.this) {
background: red;
color: blue;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td class="this">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
Alternatively, you could use a class selector if you wanted to style it differently (rather than not at all):
table tr {
background: red;
color: blue;
}
.this {
background: green;
color: white;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td class="this">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
tr.MyClassName{
// styling goes here
}
That should only style the tr but not the td.
This is a simple little table with header and footer all css and html the top header remains fixed if you scroll however;
My header columns do not line up with the table columns. Does anyone see what I am doing wrong?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {
margin:0 0 1em ;
}
table p {
margin:0;
}
.wrap {
margin: 0 0 0 0;
float:left;
position:relative;
overflow:hidden;
padding:0 0 0;
border:7px solid #CCCCCC;
/* width:1800px; */
}
.inner2 {
float:left;
/* width:1800px; */
height:570px;
position:relative;
padding:60px 0 17px;
overflow-y:hidden;
overflow-x:auto;
}
.inner {
/* width:1800px; */
float:left;
height:570px;
overflow-y:auto;
overflow-x:hidden;
}
.ylw {
background-color:yellow;
}
.rd {
background-color:red;
}
.grn {
background-color:#339966;
}
table {
/* width:1800px; */
margin:0 0 0 0;
border-collapse:collapse;
float:left;
}
td {
padding:0 0 0 0;
border:1px solid #000000;
text-align:center;
font-size:14px;
}
tfoot th, thead th {
font-weight:bold;
text-align:center;
border:1px solid #000000;
padding:0 0 0 0;
font-size:14px;
}
thead th {
border:1px solid #000000;
text-align:center;
padding:0 0 0 0;
}
thead tr p {
margin: 0 0 0 -7px;
font-size:14px;
position:absolute;
text-align:center;
padding:0 0 0 0;
top:0;
}
.last {
padding-right:15px!important;
}
</style>
</head>
<body>
<h1>Table with fixed header</h1>
<p>Notes: The header is part of the same table and not a separate table on top. The width of the table cells or header cells is not defined and will match whatever content is in the cells. The table can be a fluid length and will resize within reasonable limits accordingly.</p>
<p>You will be limited by the position of the header rows elements though as they can't really me moved around anymore thatn they are now.</p>
<div class='wrap'>
<div class='inner2'>
<div class='inner'>
<table id='data' cellspacing='0' cellpadding='0'>
<thead>
<tr>
<th><p>Jan</p></th>
<th><p>Feb</p></th>
<th><p>Mar</p></th>
<th><p>Apr</p></th>
<th><p>May</p></th>
<th><p>Jun</p></th>
<th><p>Jul</p></th>
<th><p>Aug</p></th>
<th><p>September</p></th>
<th><p>Oct</p></th>
<th><p>Nov</p></th>
<th class='last'><p>Dec</p></th>
</tr>
</thead>
<tfoot>
<tr>
<th><p>Jan</p></th>
<th><p>Feb</p></th>
<th><p>Mar</p></th>
<th><p>Apr</p></th>
<th><p>May</p></th>
<th><p>Jun</p></th>
<th><p>Jul</p></th>
<th><p>Aug</p></th>
<th><p>September</p></th>
<th><p>Oct</p></th>
<th><p>Nov</p></th>
<th class='last'><p>Dec</p></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>3</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>5</td>
<td>7</td>
<td>1</td>
<td>1</td>
<td class='last'>3</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3 more data</td>
<td>5</td>
<td class='last'>7</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>23</td>
<td>4</td>
<td>1</td>
<td>6</td>
<td class='last'>6</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>6</td>
<td>1</td>
<td>4</td>
<td>7</td>
<td>1</td>
<td>7</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td class='last'>6</td>
</tr>
<tr>
<td>2</td>
<td>3 with more data</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>8</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>8</td>
<td class='last'>6</td>
</tr>
<tr>
<td>6</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>2</td>
<td>9</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td class='last'>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>3</td>
<td>7</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>2</td>
<td>0</td>
<td>3</td>
<td>23</td>
<td class='last'>6</td>
</tr>
<tr>
<td>7</td>
<td>4</td>
<td>2</td>
<td>67</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>4</td>
<td>4</td>
<td class='last'>4</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>65</td>
<td class='last'>4</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>13</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>7</td>
<td class='last'>4</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>5</td>
<td>7</td>
<td>1</td>
<td>1</td>
<td class='last'>3</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3 more data</td>
<td>5</td>
<td class='last'>7</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>23</td>
<td>4</td>
<td>1</td>
<td>6</td>
<td class='last'>6</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>6</td>
<td>1</td>
<td>4</td>
<td>7</td>
<td>1</td>
<td>7</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td class='last'>6</td>
</tr>
<tr>
<td>2</td>
<td>3 with more data</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>8</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>8</td>
<td class='last'>6</td>
</tr>
<tr>
<td>6</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>2</td>
<td>9</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td class='last'>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>3</td>
<td>7</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>2</td>
<td>0</td>
<td>3</td>
<td>23</td>
<td class='last'>6</td>
</tr>
<tr>
<td>7</td>
<td>4</td>
<td>2</td>
<td>67</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>4</td>
<td>4</td>
<td class='last'>4</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>65</td>
<td class='last'>4</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>13</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>7</td>
<td class='last'>4</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>5</td>
<td>7</td>
<td>1</td>
<td>1</td>
<td class='last'>3</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3 more data</td>
<td>5</td>
<td class='last'>7</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>23</td>
<td>4</td>
<td>1</td>
<td>6</td>
<td class='last'>6</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>6</td>
<td>1</td>
<td>4</td>
<td>7</td>
<td>1</td>
<td>7</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td class='last'>6</td>
</tr>
<tr>
<td>2</td>
<td>3 with more data</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>8</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>8</td>
<td class='last'>6</td>
</tr>
<tr>
<td>6</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>2</td>
<td>9</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td class='last'>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>3</td>
<td>7</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>2</td>
<td>0</td>
<td>3</td>
<td>23</td>
<td class='last'>6</td>
</tr>
<tr>
<td>7</td>
<td>4</td>
<td>2</td>
<td>67</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>4</td>
<td>4</td>
<td class='last'>4</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>65</td>
<td class='last'>4</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>13</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>7</td>
<td class='last'>4</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>5</td>
<td>7</td>
<td>1</td>
<td>1</td>
<td class='last'>3</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3 more data</td>
<td>5</td>
<td class='last'>7</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>23</td>
<td>4</td>
<td>1</td>
<td>6</td>
<td class='last'>6</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>6</td>
<td>1</td>
<td>4</td>
<td>7</td>
<td>1</td>
<td>7</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td class='last'>6</td>
</tr>
<tr>
<td>2</td>
<td>3 with more data</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>8</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>8</td>
<td class='last'>6</td>
</tr>
<tr>
<td>6</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>2</td>
<td>9</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td class='last'>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>3</td>
<td>7</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>2</td>
<td>0</td>
<td>3</td>
<td>23</td>
<td class='last'>6</td>
</tr>
<tr>
<td>7</td>
<td>4</td>
<td>2</td>
<td>67</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>4</td>
<td>4</td>
<td class='last'>4</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>65</td>
<td class='last'>4</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>13</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>7</td>
<td class='last'>4</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>5</td>
<td>7</td>
<td>1</td>
<td>1</td>
<td class='last'>3</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3 more data</td>
<td>5</td>
<td class='last'>7</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>23</td>
<td>4</td>
<td>1</td>
<td>6</td>
<td class='last'>6</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>6</td>
<td>1</td>
<td>4</td>
<td>7</td>
<td>1</td>
<td>7</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td class='last'>6</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3 more data</td>
<td>5</td>
<td class='last'>7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
you are absolutely positioning and have negative margins on your P tags within the TH tags
this rule: thead tr p try zeroing out the margin on that rule.
thead tr p {
margin: 0; /* zero out margin */
font-size: 14px;
position: absolute;
text-align: center;
padding: 0;
top: 0;
}
if you want the text-align:center to work when absolutely positioning the P tags.. you will need to add a specific width to them
EDIT:
you also have your TFOOT below your THEAD instead of being after the TBODY
http://jsfiddle.net/MP8Bc/
it lines up but they are aligned left... and wont align center unless you add widths since they are absolutely positioned , which means they are out of the document flow