Table fixed header and scrollable body
Here is the working solution:
table { width: 100%;}
thead, tbody, tr, td, th { display: block; }
tr:after { content: ' '; display: block; visibility: hidden; clear: both;}
thead th { height: 30px;
/*text-align: left;*/}
tbody { height: 120px; overflow-y: auto;}
thead { /* fallback */}
tbody td, thead th { width: 19.2%; float: left;}<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped"> <thead> <tr> <th>Make</th> <th>Model</th> <th>Color</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> </tbody></table>Bootstrap 4 table with the scrollable body and header fixed
Try using flex, it should be compatible with table-responsive:
table {
display: flex;
flex-flow: column;
width: 100%;
}
thead {
flex: 0 0 auto;
}
tbody {
flex: 1 1 auto;
display: block;
overflow-y: auto;
overflow-x: hidden;
}
tr {
width: 100%;
display: table;
table-layout: fixed;
}
Hope this will help
table with fixed thead and scrollable tbody
This solution fulfills all 5 requirements:
table { width: 100%;}
table, td { border-collapse: collapse; border: 1px solid #000;}
thead { display: table; /* to take the same width as tr */ width: calc(100% - 17px); /* - 17px because of the scrollbar width */}
tbody { display: block; /* to enable vertical scrolling */ max-height: 200px; /* e.g. */ overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */}
th, td { width: 33.33%; /* to enable "word-break: break-all" */ padding: 5px; word-break: break-all; /* 4. */}
tr { display: table; /* display purpose; th's border */ width: 100%; box-sizing: border-box; /* because of the border (Chrome needs this line, but not FF) */}
td { text-align: center; border-bottom: none; border-left: none;}<table> <thead> <tr> <th>Table Header 1</th> <th>Table Header 2</th> <th>Table Header 3</th> </tr> </thead> <tbody> <tr> <td>Data1111111111111111111111111</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data2222222222222222222222222</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data3333333333333333333333333</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </tbody></table>Tailwind css table with fixed header and scrolling tbody vertically
You could add a max-height to your table's parent div and
set position:sticky and top:0 for your thead
<div class="table-wrp block max-h-96">
<table class="w-full">
<thead class="bg-white border-b sticky top-0">
<!-- other table content -->
<tbody></tbody>
</thead>
</table>
</div>
Example
<script src="https://cdn.tailwindcss.com"></script>
<div class="min-h-screen bg-gray-100">
<main>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg py-4 px-4">
<form class="mb-4" method="POST" action="https://shipping.local/login">
<div class="address">
<div class="item mb-2 md:flex md:flex-wrap md:justify-between">
<div wire:id="rbWM5jbW8w1GcT2ql3DF" class="container w-full px-4 sm:px-8">
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block w-full sm:px-6 lg:px-8">
<div class="table-wrp block max-h-96">
<table class="w-full">
<thead class="bg-white border-b sticky top-0">
<tr>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Select
</th>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Company
</th>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Address
</th>
</tr>
</thead>
<tbody class=" h-96 overflow-y-auto">
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="1">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST </td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="2">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="3">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
MUDGEE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="4">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
ORANGE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="5">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
TAREN POINT
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="1">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST </td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="2">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="3">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
MUDGEE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="4">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
ORANGE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="5">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
TAREN POINT
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="1">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST </td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="2">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="3">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
MUDGEE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="4">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
ORANGE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="5">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
TAREN POINT
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Livewire Component wire-end:rbWM5jbW8w1GcT2ql3DF -->
</div>
</div>
</form>
</div>
</div>
</div>
</main>
</div>Table fixed header and scrollable body, problem with content behind header
It's because you have border-collapse set to collapse. Remove it and taking the spacing to 0px. Then add in your border.
.tableFixHead { overflow-y: auto; height: 300px; }
.tableFixHead thead th {position: sticky; top: 0; }
.tableFixHead th { background: white; }
/* Just common table stuff. Really. */
table { width: 100%; border: .5px solid black; border-spacing: 0px;}
table td, table th { border: .5px solid black; }
https://jsfiddle.net/7kasL5mg/
Table with Fixed Header Row and Scrollable Content
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
width: 1000px;
table-layout: fixed;
}
td,th {
padding: 5px;
min-width: 200px;
border-right: 1px solid #ccc
}
thead tr {
background: #888;
color: #eee;
display: block;
position: relative;
}
tbody {
display: block;
height: 200px;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
tbody tr:nth-child(even) {
background: #ddd;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
</body>
</html>
Table elements appear under the table header when scrolling
The background on your header is transparent, which is why you can see the body rows behind it.
You'll need to use CSS to make the background-color solid instead.
Related Topics
Do I Use ≪Img≫, ≪Object≫, or ≪Embed≫ For Svg Files
Should I Put Input Elements Inside a Label Element
Margin-Top Push Outer Div Down
Why Does Position:Relative; Appear to Change the Z-Index
What Is the Correct Value For the Disabled Attribute
Why Are Nested Anchor Tags Illegal
Angular 2 Dropdown Options Default Value
How to Remove Underline from a Link in Html
With Ng-Bind-Html-Unsafe Removed, How to Inject Html
How to Set Input Type Date'S Default Value to Today
How to Create Your Own HTML Tag in Html5
Change Div Order With CSS Depending on Device-Width
How to Have Two Background Colors For a Single HTML Element
Play Local (Hard-Drive) Video File With Html5 Video Tag
Why Does HTML Require That Multiple Spaces Show Up as a Single Space in the Browser