syncronize TD with TH

Question

It been a while that i'm looking for a solution to print fixed header and footer on multipage document, ive finally made it work but still have a little problem.

The problem is that the width of my tds dont follow my ths :( and i get a disorder table.

This is my html code :

<table>
  <thead>
      <tr>
          <td>
              <div class="header-space">
              </div>
          </td>
      </tr>
  </thead>
  <tfoot>
    <tr>
      <td>
        <div class="footer-space"></div>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>
        <div class="content">
            <tr>
              <td>Value A</td>
              <td>Value B</td>
              <td>Value C</td>
              <td>Value D</td>
              <td>Value E</td>
              <td>Value F</td>
              <td>Value G</td>
            </tr>
            <tr></tr>
            ...
        </div>
      </td>
    </tr>
  </tbody>
</table>
<div class="footer">
  <p>FOOTER CONTENT</p>
</div>
<div class="header">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
    <th>F</th>
    <th>G</th>
  </tr>
  <tr></tr>
  ...
</div>
<style>
.header, .header-space {
    height: 280px;
    width: 100%;
}
.footer, .footer-space {
  height: 50px;

}

.header {
  position: fixed;
  top: 0;
}

.footer {
  position: fixed;
  bottom: 0;
}
</style>

Thank you for reading my post ! Good day

Possible duplicate of [Table fixed header and scrollable body](https://stackoverflow.com/questions/21168521/table-fixed-header-and-scrollable-body) — mrQubeMaster, Feb 12 '19 at 16:06
ooh wait.. i.. ooh.. jah it is. you want a fixed header and footer for a page, not for a table? — mrQubeMaster, Feb 12 '19 at 16:09
jah i did but apparently just didn't get it. thats what you get for browsing stack while tired. you want de header fixed above the table with the same width as the td right? how is that different from the post i linked first? — mrQubeMaster, Feb 12 '19 at 16:16

score 0 · Answer 1 · answered Feb 12 '19 at 16:30

Sorry if my comments came as a bit harsh.
If you want to have a fixed header and footer and the table scroll between them then see the solution on the other stack post or this fiddle http://jsfiddle.net/T9Bhm/7 which comes down to

  tbody {
            height: 120px;
            overflow-y: auto;
        }

Why is the header formed with <tr> but outside the table? If you put it inside the <table> tag it will take over the same width as <td>

syncronize TD with TH

1 Answers1