How to display scroll bar onto a html table

by

Something like this?

http://jsfiddle.net/TweNm/

The idea is to wrap the <table> in a non-statically positioned <div> which has an overflow:auto CSS property. Then position the elements in the <thead> absolutely.

#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;

}
#table-wrapper table * {
  background:yellow;
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}
<div id="table-wrapper">
  <div id="table-scroll">
    <table>
        <thead>
            <tr>
                <th><span class="text">A</span></th>
                <th><span class="text">B</span></th>
                <th><span class="text">C</span></th>
            </tr>
        </thead>
        <tbody>
          <tr> <td>1, 0</td> <td>2, 0</td> <td>3, 0</td> </tr>
          <tr> <td>1, 1</td> <td>2, 1</td> <td>3, 1</td> </tr>
          <tr> <td>1, 2</td> <td>2, 2</td> <td>3, 2</td> </tr>
          <tr> <td>1, 3</td> <td>2, 3</td> <td>3, 3</td> </tr>
          <tr> <td>1, 4</td> <td>2, 4</td> <td>3, 4</td> </tr>
          <tr> <td>1, 5</td> <td>2, 5</td> <td>3, 5</td> </tr>
          <tr> <td>1, 6</td> <td>2, 6</td> <td>3, 6</td> </tr>
          <tr> <td>1, 7</td> <td>2, 7</td> <td>3, 7</td> </tr>
          <tr> <td>1, 8</td> <td>2, 8</td> <td>3, 8</td> </tr>
          <tr> <td>1, 9</td> <td>2, 9</td> <td>3, 9</td> </tr>
          <tr> <td>1, 10</td> <td>2, 10</td> <td>3, 10</td> </tr>
          <!-- etc... -->
          <tr> <td>1, 99</td> <td>2, 99</td> <td>3, 99</td> </tr>
        </tbody>
    </table>
  </div>
</div>

More Related Contents:

  1. How can I truncate table cells, but fit as much as content possible?
  2. overflow:scroll; in
  3. How to design a table like this
  4. How do I create an HTML table with a fixed/frozen left column and a scrollable body?
  5. Alternate table row color using CSS?
  6. Make background color extend into overflow area
  7. CSS3’s border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  8. Why doesn’t table > tr > td work when using the child selector?
  9. Table with fixed header and fixed column on pure css
  10. IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
  11. Fixed Table Cell Width
  12. CSS overflow:hidden with floats
  13. How to make fill height
  14. HTML table with horizontal scrolling (first column fixed)
  15. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  16. CSS table-cell equal width
  17. IE6 + IE7 CSS problem with overflow: hidden; – position: relative; combo
  18. Setting table column width
  19. How to force table cell content to wrap?
  20. Table scroll with HTML and CSS [duplicate]
  21. How to center the contents of an HTML table?
  22. Make a nav bar stick
  23. How to hide Table Row Overflow?
  24. Can overflow:hidden affect layout?
  25. Generate scroll bar for overflow to the left
  26. How do I remove the horizontal scrollbar in a div?
  27. Removing unwanted table cell borders with CSS
  28. Yet Another Divs vs Tables issue: Forms
  29. Splitting a table cell into two columns in HTML
  30. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content

Leave a Comment