HTML table with horizontal scrolling (first column fixed)

by

How about:

table {
  table-layout: fixed; 
  width: 100%;
  *margin-left: -100px; /*ie7*/
}
td, th {
  vertical-align: top;
  border-top: 1px solid #ccc;
  padding: 10px;
  width: 100px;
}
.fix {
  position: absolute;
  *position: relative; /*ie7*/
  margin-left: -100px;
  width: 100px;
}
.outer {
  position: relative;
}
.inner {
  overflow-x: scroll;
  overflow-y: visible;
  width: 400px; 
  margin-left: 100px;
}
<div class="outer">
  <div class="inner">
    <table>
      <tr>
        <th class=fix></th>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th class="fix">Col 5</th>
      </tr>
      <tr>
        <th class=fix>Header A</th>
        <td>col 1 - A</td>
        <td>col 2 - A (WITH LONGER CONTENT)</td>
        <td>col 3 - A</td>
        <td>col 4 - A</td>
        <td class=fix>col 5 - A</td>
      </tr>
      <tr>
        <th class=fix>Header B</th>
        <td>col 1 - B</td>
        <td>col 2 - B</td>
        <td>col 3 - B</td>
        <td>col 4 - B</td>
        <td class=fix>col 5 - B</td>
      </tr>
      <tr>
        <th class=fix>Header C</th>
        <td>col 1 - C</td>
        <td>col 2 - C</td>
        <td>col 3 - C</td>
        <td>col 4 - C</td>
        <td class=fix>col 5 - C</td>
      </tr>
    </table>
  </div>
</div>

You can test it out in this jsbin: http://jsbin.com/uxecel/4/edit

More Related Contents:

  1. How to display scroll bar onto a html table
  2. Fixed header table with horizontal scrollbar and vertical scrollbar on
  3. How can I truncate table cells, but fit as much as content possible?
  4. Set cellpadding and cellspacing in CSS?
  5. Form inside a table
  6. Word-wrap in an HTML table
  7. Create HTML Table with SQL FOR XML
  8. How to deal with page breaks when printing a large HTML table
  9. HTML/CSS: Making two floating divs the same height
  10. Make a div fill the height of the remaining screen space
  11. CSS margin adds space outside parent element [duplicate]
  12. Having Google Chrome repeat table headers on printed pages
  13. Create a HTML table where each TR is a FORM
  14. Add a horizontal scrollbar to an HTML table
  15. Wrap text in tag
  16. Position absolute and overflow hidden
  17. Rounded table corners CSS only
  18. using text-align center in colgroup
  19. Flexbox affects overflow-wrap behavior
  20. overflow:scroll; in
  21. How can I apply a border only inside a table?
  22. How to prevent text from overflowing in CSS?
  23. Equivalent to float in Outlook
  24. Table overflowing outside of div
  25. The border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  26. Wrapping HTML table rows in tags
  27. Should Tables be avoided in HTML at any cost?
  28. CSS: display:block; vs display:table;
  29. html tables: thead vs th
  30. Setting max-height for table cell contents

Leave a Comment