-1

As per my requirement, I need fixed headers/footers of a table. I need the overflowing absolutely positioned headers/footers withing the parent.

FIDDLE

I tried following this answer https://stackoverflow.com/a/4605809/2968762

But, by applying position: relative; to wrapper div, the headers/footers are not fixed anymore.

Abhi
  • 4,123
  • 6
  • 45
  • 77

2 Answers2

0

body {
  height: 50rem;
}
.wrapper {
  margin-top: 10rem;
  max-height: 6.7rem;
  max-width: 12.5rem;
  overflow: scroll;
  table {
    width: 25rem;
  }
}

.header,
.footer {
  table {
    position: absolute;
    background: white;
  }
}

.footer table {
  bottom: 10.6rem;
}

table {
  thead {
    tr {
      th {
        width: 4rem;
        text-align: center;
      }
    }
  }
  tbody {
    tr {
      td {
        width: 4rem;
        text-align: center;
      }
    }
  }
}


.wrapper .header {
    position: absolute;
    width: 11.5rem;
    overflow: hidden;
    background: white;
    top: 160px;
}
<div class="wrapper">
  <div class="header">
    <table>
      <thead>
        <tr>
          <th>Head 1</th>
          <th>Head 2</th>
          <th>Head 3</th>
          <th>Head 4</th>
          <th>Head 5</th>
          <th>Head 6</th>
        </tr>
      </thead>
    </table>
  </div>

  <div class="main_body">
    <table>
      <thead>
        <tr>
          <th>Head 1</th>
          <th>Head 2</th>
          <th>Head 3</th>
          <th>Head 4</th>
          <th>Head 5</th>
          <th>Head 6</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>11</td>
          <td>23</td>
          <td>44</td>
          <td>20</td>
          <td>30</td>
          <td>40</td>
        </tr>
        <tr>
          <td>32</td>
          <td>1</td>
          <td>7</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>49</td>
          <td>30</td>
          <td>57</td>
          <td>30</td>
          <td>41</td>
          <td>52</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="footer">
    <table>
      <tbody>
        <tr>
          <td>49</td>
          <td>30</td>
          <td>57</td>
          <td>30</td>
          <td>41</td>
          <td>52</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

This should do the trick

Sandwell
  • 1,451
  • 2
  • 16
  • 31
  • No, this works for you, as you are placing the table at the top of the page where `position: fixed` places the element. But, this fix would fail if the table doesn't start from the top of the page. – Abhi Nov 03 '17 at 10:24
  • I tried by adding margin-top: 100px to the wrapper and it still works... Perhaps if you provide an environment that match exactly what you need I can be more accurate about my answer. – Sandwell Nov 03 '17 at 10:45
  • I have updated my fiddle with some body height. https://jsfiddle.net/1f32ngsp/4/. Now, try applying `position: fixed` and see – Abhi Nov 03 '17 at 10:52
  • I fixed it. But I think you should consider using a bit of Javascript. To calculate the top position regarding the height of the content above the table. – Sandwell Nov 03 '17 at 14:48
0

Thanks to THIS ARTICLE, I found a solution:

Wrapping the entire content inside another wrapper and applying the following styles to it fixed the issue:

.grand-wrapper {
  position: relative;
  overflow: hidden;
}

FIDDLE

Abhi
  • 4,123
  • 6
  • 45
  • 77