Freeze the top row for an html table only (Fixed Table Header Scrolling)
This is called Fixed Header Scrolling. There are a number of documented approaches:
http://www.imaputz.com/cssStuff/bigFourVersion.html
You won't effectively pull this off without JavaScript ... especially if you want cross browser support.
There are a number of gotchyas with any approach you take, especially concerning cross browser/version support.
Edit:
Even if it's not the header you want to fix, but the first row of data, the concept is still the same. I wasn't 100% which you were referring to.
Additional thought
I was tasked by my company to research a solution for this that could function in IE7+, Firefox, and Chrome.
After many moons of searching, trying, and frustration it really boiled down to a fundamental problem. For the most part, in order to gain the fixed header, you need to implement fixed height/width columns because most solutions involve using two separate tables, one for the header which will float and stay in place over the second table that contains the data.
//float this one right over second table
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
<table>
//Data
</table>
An alternative approach some try is utilize the tbody and thead tags but that is flawed too because IE will not allow you put a scrollbar on the tbody which means you can't limit its height (so stupid IMO).
<table>
<thead style="do some stuff to fix its position">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody style="No scrolling allowed here!">
Data here
</tbody>
</table>
This approach has many issues such as ensures EXACT pixel widths because tables are so cute in that different browsers will allocate pixels differently based on calculations and you simply CANNOT (AFAIK) guarantee that the distribution will be perfect in all cases. It becomes glaringly obvious if you have borders within your table.
I took a different approach and said screw tables since you can't make this guarantee. I used divs to mimic tables. This also has issues of positioning the rows and columns (mainly because floating has issues, using in-line block won't work for IE7, so it really left me with using absolute positioning to put them in their proper places).
There is someone out there that made the Slick Grid which has a very similar approach to mine and you can use and a good (albeit complex) example for achieving this.
https://github.com/6pac/SlickGrid/wiki
Freezing/Fixing the Top Header Row of a table
Add below to css.
table thead {
position: fixed;
}
Try this code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border:#ccc 1px solid;
border-radius:3px;
border-collapse:collapse; border-spacing: 0;
box-shadow: 0 1px 2px #d1d1d1;
}
table th {
padding:10px 10px 10px 10px;
border-top:0;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #ededed;
}
table th:first-child {
text-align: left;
}
table tr:first-child th:first-child {
border-top-left-radius:3px;
border-left: 0;
}
table tr:first-child th:last-child {
border-top-right-radius:3px;
}
table tr {
text-align: center;
}
table td:first-child {
text-align: left;
border-left: 0;
}
table td {
padding:10px;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
}
table tr:last-child td {
border-bottom:0;
}
table tr:last-child td:first-child {
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
border-bottom-right-radius:3px;
}
table tr:hover td {
background: #f2f2f2;
}
table th, table td {
width: 160px;
}
#wrapper {
width: 740px;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
}
table thead
{
position:fixed;
}
</style>
</head>
<body>
<div id="wrapper">
<table>
<!-- Table Header -->
<thead>
<tr>
<th>Task Details</th>
<th>Firstname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>Create pretty table design</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>Take the dog for a walk</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>Waste half the day on Twitter</td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td>Feel inferior after viewing Dribble</td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Wince at "to do" list</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td>Vow to complete personal project</td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>Procrastinate</td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
<td> </td>
<td>80%</td>
<td><a href="#inexistent-id">Another</a></td>
</tr>
</tbody>
<!-- Table Body -->
</table>
</div>
</body>
</html>
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>How do I create an HTML table with a fixed/frozen left column and a scrollable body?
If you want a table where only the columns scroll horizontally, you can position: absolute the first column (and specify its width explicitly), and then wrap the entire table in an overflow-x: scroll block. Don't bother trying this in IE7, however...
Relevant HTML & CSS:
table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
}
td,
th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}
div {
width: 500px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
}
.headcol:before {
content: 'Row ';
}
.long {
background: yellow;
letter-spacing: 1em;
}<div>
<table>
<tr>
<th class="headcol">1</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">2</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">3</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">4</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">5</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">6</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
</div>How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?
Use: https://github.com/mkoryak/floatThead
Docs: http://mkoryak.github.io/floatThead/examples/bootstrap3/
$(document).ready(function(){
$(".sticky-header").floatThead({top:50});
});
DEMO with 2 Tables and Fixed Header: http://jsbin.com/zuzuqe/1/
http://jsbin.com/zuzuqe/1/edit
HTML
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer with fixed navbar</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<table class="table table-striped sticky-header">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3>Table 2</h3>
<table class="table table-striped sticky-header">
<thead>
<tr>
<th>#</th>
<th>New Table</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
CSS
body{
padding-top:50px;
}
table.floatThead-table {
border-top: none;
border-bottom: none;
background-color: #fff;
}
How to hide rows as they scroll past header on fixed header css table
What if just changing the opacity in the background color, from background-color: var(--color-1) to for example background-color: rgb(173 209 77) in thead th{}.
* {
margin: 0;
}
:root {
--font-1: rgba(0, 0, 0, 0.75);
--font-2: rgba(0, 0, 0, 1);
--color-1: rgba(211, 211, 211, 0.25);
--color-2: rgba(70, 130, 180, 0.25);
}
body {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: minmax(12rem, auto) 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"s h"
"s m";
user-select: none;
color: var(--font-1);
}
nav {
grid-area: s;
}
header {
grid-area: h;
}
main {
grid-area: m;
}
nav {
background-color: var(--color-1);
padding-top: 3.5rem;
}
.sidebar-item {
padding: 0.5rem 1rem 0.5rem 1rem;
}
.sidebar-item:hover {
background-color: var(--color-2);
color: var(--font-2);
}
header {
padding: 1rem;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
border-bottom: 1px solid var(--color-1);
}
main {
padding: 1rem;
display: grid;
grid-template-rows: auto 1fr;
grid-row-gap: 1rem;
overflow: hidden;
}
#table-wrapper {
overflow-y: auto;
}
table {
width: 100%;
height: 100%;
border-collapse: collapse;
}
thead th {
position: sticky;
top: 0;
background-color: rgb(173 209 77);
padding: 1rem;
}
td {
padding: 0.75rem;
}
tbody > tr:hover {
background-color: var(--color-2);
}
#table-wrapper::-webkit-scrollbar {
width: 0.25rem;
}
#table-wrapper::-webkit-scrollbar-track {
background-color: white;
}
#table-wrapper::-webkit-scrollbar-thumb {
background-color: var(--color-2);
}<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<title>AP Log 3.0</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<nav>
<div>
<div class="sidebar-item">Dashboard</div>
<div class="sidebar-item">Invoices</div>
<div class="sidebar-item">Vendors</div>
<div class="sidebar-item">Departments</div>
<div class="sidebar-item">Dashboard</div>
</div>
</nav>
<header>
<div class="material-icons">menu</div>
<div>Invoices</div>
</header>
<main>
<div id="omnibar">
<input type="search" placeholder="Search ..." />
<button>New Invoice</button>
</div>
<div id="table-wrapper">
<table>
<thead>
<tr>
<th>Invoice#</th>
<th>Vendor</th>
<th>Date</th>
<th>PO#</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>2207419457</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>305453</td>
<td>365.04</td>
</tr>
<tr>
<td>2207419461</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>306115</td>
<td>547.55</td>
</tr>
<tr>
<td>2207419462</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>306645</td>
<td>730.07</td>
</tr>
<tr>
<td>2207419463</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>306743</td>
<td>182.52</td>
</tr>
<tr>
<td>2207419464</td>
<td>Medline Industries Inc</td>
<td>04/18/2022</td>
<td>306573</td>
<td>419.85</td>
</tr>
<tr>
<td>INV22-18109</td>
<td>ISO-Med, Inc.</td>
<td>04/14/2022</td>
<td>306691</td>
<td>2036.12</td>
</tr>
<tr>
<td>IN95052292</td>
<td>Performance Health Supply</td>
<td>04/18/2022</td>
<td>307156</td>
<td>1569.62</td>
</tr>
<tr>
<td>80465167</td>
<td>Verathon</td>
<td>04/12/2022</td>
<td>306837</td>
<td>2609.27</td>
</tr>
<tr>
<td>8808144278</td>
<td>VWR International, LLC</td>
<td>04/08/2022</td>
<td>306872</td>
<td>5405.82</td>
</tr>
<tr>
<td>8808150081</td>
<td>VWR International, LLC</td>
<td>04/11/2022</td>
<td>306877</td>
<td>5405.82</td>
</tr>
<tr>
<td>8808150082</td>
<td>VWR International, LLC</td>
<td>04/11/2022</td>
<td>306875</td>
<td>369.85</td>
</tr>
<tr>
<td>8808157812</td>
<td>VWR International, LLC</td>
<td>04/11/2022</td>
<td>306875</td>
<td>721.49</td>
</tr>
<tr>
<td>74616105</td>
<td>Baxter Healthcare Corporation</td>
<td>04/05/2022</td>
<td>305951</td>
<td>1042.82</td>
</tr>
<tr>
<td>74651499</td>
<td>Baxter Healthcare Corporation</td>
<td>04/07/2022</td>
<td>306768</td>
<td>9759.18</td>
</tr>
<tr>
<td>508770</td>
<td>MethaPharm, Inc</td>
<td>04/14/2022</td>
<td>306995</td>
<td>1356</td>
</tr>
<tr>
<td>5865861759</td>
<td>Covidien</td>
<td>04/18/2022</td>
<td>307122</td>
<td>1797.92</td>
</tr>
<tr>
<td>74664938</td>
<td>Baxter Healthcare Corporation</td>
<td>04/08/2022</td>
<td>306768</td>
<td>2053.24</td>
</tr>
<tr>
<td>5865862566</td>
<td>Covidien</td>
<td>04/18/2022</td>
<td>307122</td>
<td>599.31</td>
</tr>
<tr>
<td>74688808</td>
<td>Baxter Healthcare Corporation</td>
<td>04/11/2022</td>
<td>306768</td>
<td>1419.42</td>
</tr>
<tr>
<td>INV000294956</td>
<td>Katena Products, Inc</td>
<td>04/18/2022</td>
<td>307158</td>
<td>603.4</td>
</tr>
<tr>
<td>1783744</td>
<td>Key Surgical Inc</td>
<td>04/13/2022</td>
<td>306016</td>
<td>1739.09</td>
</tr>
<tr>
<td>2893201</td>
<td>Masimo</td>
<td>04/08/2022</td>
<td>306537</td>
<td>3232.5</td>
</tr>
<tr>
<td>993388426</td>
Related Topics
Href Image Link Download on Click
Do Checkbox Inputs Only Post Data If They'Re Checked
How to Use Jsf+Facelets With HTML 4/5
Why Does Position:Relative; Appear to Change the Z-Index
Bootstrap Full-Width With 2 Different Backgrounds (And 2 Columns)
Make a Grid Item Span to the Last Row/Column in Implicit Grid
How to Trigger Autofill in Google Chrome
What Does Appending "V=1" to CSS and JavaScript Urls in Link and Script Tags Do
Why Is 'Position: Sticky' Not Working With Core Ui'S Bootstrap Css
Are Custom Elements Valid Html5
Data Protocol Url Size Limitations
How to Change Bootstrap 3 Column Order on Mobile Layout
Make Background Color Extend into Overflow Area