html

sticky table headers

Posted in html
297
11:51 pm, June 12, 2025
 

sticky table headers

nice looking tables that have sticky headers, credits in link below. seems to be all css as well, nice!

commented out the global stuff

HTML

<h1>Sticky Table Headers and Columns With CSS</h1>
<p>A sticky table header and column can be easily achieved by using the css position sticky property. Defining these properties with classes makes it easy to assign either of these options to any of your tables.</p>
<h2>Sticky Header and Sticky First Column</h2>
<div class="table-wrapper">
  <table>
    <thead>
      <tr class="sticky">
        <th class="sticky">Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
        <th>Column 8</th>
        <th>Column 9</th>
        <th>Column 10</th>
        <th>Column 11</th>
        <th>Column 12</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
  </table>
</div>

<h2>Sticky Header Only</h2>
<div class="table-wrapper">
  <table>
    <thead>
      <tr class="sticky">
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
        <th>Column 8</th>
        <th>Column 9</th>
        <th>Column 10</th>
        <th>Column 11</th>
        <th>Column 12</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
  </table>
</div>

<h2>Sticky First Column Only</h2>
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th class="sticky">Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
        <th>Column 8</th>
        <th>Column 9</th>
        <th>Column 10</th>
        <th>Column 11</th>
        <th>Column 12</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td class="sticky">Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

:root {
  --stickyBackground: #f5f5f5;
  --borderColor: #C9D1DC;
}

/*
body {
  font-family: 'Nunito Sans', sans-serif;
  max-width: 960px;
  margin: 0 auto;
  padding: 2vmax;
}

h1, h2 {
  margin-top: 48px;
}
*/

.table-wrapper {
  height: 320px;
  border: 1px solid var(--borderColor);
  overflow: auto;
}

table {
  border-spacing: 0;
}

thead {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

tbody {
  font-size: 14px;
}

th, td {
  padding: 18px 24px;
  white-space: nowrap;
  border-bottom: 1px solid var(--borderColor);
}

tr:last-child td {
  border-bottom: none;
}


/*
STICKY ROW
Normal css box-shadow works for the header as it is a single html element
*/

tr.sticky {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--stickyBackground);
  box-shadow: 0 0 6px rgba(0,0,0,0.25);
}


/*
STICKY COLUMN
Avoid undesirable overlapping shadows by creating a faux shadow on the ::after psudo-element instead of using the css box-shadow property.
*/

th.sticky,
td.sticky {
  position: sticky;
  left: 0;
  background: var(--stickyBackground);
}

th.sticky::after,
td.sticky::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 0;
  bottom: -1px;
  width: 5px;
  border-left: 1px solid var(--borderColor);
  background: linear-gradient(90deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 100%);
}

th.sticky::before,
td.sticky::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0;
  bottom: -1px;
  width: 5px;
  border-right: 1px solid var(--borderColor);
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 100%);
}

Sticky Table Headers and Columns With CSS

A sticky table header and column can be easily achieved by using the css position sticky property. Defining these properties with classes makes it easy to assign either of these options to any of your tables.

Sticky Header and Sticky First Column

Column 1 Column 2 Column 3 Column 4 Column 5 Column 6 Column 7 Column 8 Column 9 Column 10 Column 11 Column 12
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text

Sticky Header Only

Column 1 Column 2 Column 3 Column 4 Column 5 Column 6 Column 7 Column 8 Column 9 Column 10 Column 11 Column 12
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text

Sticky First Column Only

Column 1 Column 2 Column 3 Column 4 Column 5 Column 6 Column 7 Column 8 Column 9 Column 10 Column 11 Column 12
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Posted in html
297
11:51 pm, June 12, 2025

External Link for sticky table headers

View Statistics
This Week
1
This Month
1
This Year
1615

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in html
Content Editable sticky table headers 🔗How to add a Link in HTML? CSSnowflakes simple snowflakes non-JS snowflakes for your website snowflakes falling body effects HTML how to add an IMAGE! Quick HTML Tutorial HTML How to CENTRE Text Easy! - Quick HTML and CSS Tutorial font awesome spinner loader loading spinner Using the HTML tag details for easy accordions Video different sources on screen sizes video embed html responsive Boots Widget change from widget to cat head and click function pulse map dots codemirror with auto preview window using figcaption and figure for your images a google font like muli - mulish and embed code basic radio checklist - check and item and get its value in a textarea share to twitter html link only linked in share link html only, linkedin, linked-in Facebook HTML for Sharing a Link Footer Design and Redesign Regions of New Zealand - In Dropdown Form content editable p tag with spell check enabled get directions from google maps form embed Common and Uncommon Meta Tag's and Social Meta Tags Input Suggestions using a datalist Add custom symbol to ul li list and align text items using the kbd html tag twitter social sharing meta tags test image url that always changes unsplash placeholder set the amount of lines to show in a textarea field Scroll down indicator css javascript and html a page with two images Aligning Images in TinyMCE or Floating them left and right (code) test page for the custom css 12 grid used on this site easy twitter embed code Custom JS Tabs - No Jquery or Jquery UI scroll to top html css and js hide parts of a form until the 1st item is selected load a youtube video in a fancybox modal add google captcha to enable and disable a form button template for testing and live reloading html files toggle div function with chevron up down toggle Bootstrap Card Formatting HTML and CSS - Header and Footer Applied Accessibility - Tab Index Applied Accessibility - Access Keys Dropdown Box with Searchable Text meta keywords tag meta description tag favicon code meta tag foundation includes cdnjs
Related Search Terms
html text 1
html abs 1
html single 1
html element 1
html the 1
html Creating 1
html HTML 1
html nice 1
html flow 1
html font 2
html CSS 2
html stick 5
html header 7
html html 1
html using 2
html easy 1
html adding 2
html css 3
html table 9
html margin 1
html Looking 1
html hit 1
html only 1
html root 1
html box-shadow 1
html First 1
html its 2
html that 2
html z-index 1
html stu 1
html https 1
html head 8
html work 2
html Stick 8
Other Categories in Code
alpine js apps c css factorio font awesome images linux quick modals sqlite site bugs site updates slick slider sliders testing windows apps animation apache api apps asp bat blocking bootstrap bootstrap templates charts cookies core css css filters css grid design elements docker domains emoji fancybox fonts foundation framework gimp git html icons ideas image formatting images javascript javascript functions jquery js linux mac minecraft misc modal modals mysql nginx node php php errors php function php functions php simple html dom pi400 python react regex sections simple_html_dom simplepie php site bugs site documentation slick slick slider sql sqlite ssh sublime svg svg css templates tools video virtual box vscode vue webdev windows windows 11 windows commands wordpress
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
I believe that in order to better your knowledge base, it takes a lot of failing in order to succeed. I don't consider anything a failure as long as you get back up and you learn from your own mistakes.
Unknown
Random CSS Property

transform-origin

The transform-origin CSS property sets the origin for an element's transformations.
transform-origin css reference