1

I'm trying to create a 2D table with fixed variables on the top and far left of the table. I have already added the horizontal and vertical headers, but I'm not too sure of how to fix them so that the viewer can scroll through the data.

CSS + HTML:

.fixed-tables {
  position: relative background: white;
}

.fixed-tables th {
  position: absolute;
  background: white;
}
<table class="table fixed-tables">
  <thead>
    <tr>
      <th></th>
      <th>Hor. Header 1</th>
      <th>Hor. Header 2</th>
      <th>Hor. Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Ver. Header 1</th>
      <td>(null)</td>
      <td>(null)</td>
    </tr>
    <tr>
      <th>Ver. Header 2</th>
      <td>(null)</td>
      <td>(null)</td>
    </tr>
    <tr>
      <th>Ver. Header 3</th>
      <td>(null)</td>
      <td>(null)</td>
      <td>(null)</td>
    </tr>
  </tbody>
</table>

This doesn't quite work because the data and headers overlap one another. Any advice is greatly appreciated.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
newsharepointuser101
  • 11
  • 3

1 Answers1

0

I use datatables whenever I am trying to create tables with fixed headers or columns. It is incredibly robust and offers what you're looking for.

https://datatables.net/

Craig Howell
  • 1,114
  • 2
  • 12
  • 28
  • @newsharepointuser101 it's a great plugin that has great documentation. It is a bit heavy but has been very useful over the years. – Craig Howell Jul 31 '17 at 19:44