0

I am currently working on a table that will be filled with over 500 records and has a lot of headers. I have managed to get most of it done, but the problem is that I cannot seem to get the header and footer to scroll with the table horizontally as well as being sticky headers/footers.

Essentially: I want the header/footer to be sticky vertically but not horizontally. Is that possible in CSS only?

Here is a link to a jsFiddle showing off the problem I am having: https://jsfiddle.net/j8rd9jpj/14/

I have found some questions/solutions similar to my problem, but they were either not solved or the question didn't really apply to my situation:

Horizontal scrolling on table with fixed header

Fixed header table with horizontal scrollbar and vertical scrollbar on

I am trying to solve this issue using CSS only, the table HTML is fixed and I can't really add extra divs for the footer or header .

I am thinking the issue is that the scroll bar is inside the table vs outside of it, but I am not sure how to approach this problem

My HTML: 

<div id="main">
  <table id="tableData">
    <thead>
      <tr>
        <th>Something 1</th>
        <th>Something 2</th>
        <th>Something 3</th>
        <th>Something 4</th>
        <th>Something 5</th>
        <th>Something 6</th>
        <th>Something 7</th>
        <th>Something 8</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
        ....
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Something 1</th>
        <th>Something 2</th>
        <th>Something 3</th>
        <th>Something 4</th>
        <th>Something 5</th>
        <th>Something 6</th>
        <th>Something 7</th>
        <th>Something 8</th>
      </tr>
    </tfoot>
  </table>
</div>

My CSS: 

body {
  overflow: hidden;
}

#main {
  overflow: scroll;
  display: table;
  max-height: 200px;
}

#tableData {
  table-layout: fixed;
  margin: auto;
  width: 100%;
  overflow-x: auto;
}

#tableData>tbody>tr>td {
  width: 120px;
  padding: 1px 8px 8px 1px;
  word-wrap: break-word;
}

#tableData thead,
#tableData tfoot {
  display: table;
  width: 100%;
}

#tableData tbody {
  height: 100px;
  overflow: auto;
  display: block;
  width: 100%;
}

#tableData tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

#tableData th {
  min-width: 120px;
}

Thank you!

user3369494
  • 123
  • 11

1 Answers1

0
#tableData {
    table-layout:fixed;
    margin:auto;
    width:100%;
    overflow-x:auto;
    max-height: 200px;
    display: block;
}

#tableData > tbody > tr > td {
    width: 120px;
    padding: 1px 8px 8px 1px;
    word-wrap:break-word;
}

#tableData thead, #tableData tfoot {
    display:table;
    width:100%;
}

#tableData tbody {
  overflow: auto;
  display: block;
  width: 100%;
}

#tableData tbody tr{
  display: table;
  width: 100%;
  table-layout: fixed;
}

#tableData th {
    min-width: 120px;
}
Michael Lam
  • 11
  • 3
  • That seemed to solve part of the problem, but I would like to keep the sticky footer/header as well. I edited my answer to be more specific with what I need. Thank you, though! Edit: I want the header/footer to be sticky vertically but not horizontally. Is that possible in CSS? – user3369494 Mar 01 '18 at 17:07