синхронизировать TD с TH

Question

Некоторое время я искал решение для печати фиксированного верхнего и нижнего колонтитула в многостраничном документе, я наконец-то заставил его работать, но все еще есть небольшая проблема.

Проблема в том, что ширинамои tds не следуют моим ths :( и я получаю таблицу беспорядка.

Это мой HTML-код:

<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>

Спасибо за чтение моего поста! Добрый день

Answer 1

Извините, если мои комментарии стали немного резкими.
Если вы хотите иметь фиксированный верхний и нижний колонтитулы и прокрутку таблицы между ними, то посмотрите решение в другом сообщении стека или этой скрипкеhttp://jsfiddle.net/T9Bhm/7, что сводится к

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

Почему заголовок сформирован с <tr>, но вне таблицы?Если вы поместите его внутрь тега <table>, он займет ту же ширину, что и <td>