CODEWITHSUNDEEP
htmlcss
HellaDev
HellaDev

Reputation: 408

Aligning table header column widths with table body when they're in different tables

I have a table header that needs (I believe) to stay in a separate table due to positioning reasons. What is the best way to tell the table header to determine its column spacing based on the tbody contents below that rest inside a different <table>? Due to some constraints in the structure of what I am working on it would be difficult to move these into the same table, so that probably isn't an option, unfortunately.

For example, I have something like this:

<table> 
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
            <th>Three</th>
            <th>Four</th>
            <th>Five</th>
        </tr>
    </thead>
</table>

<div>
    <p>Some keys here about what highlighted text below means</p>
</div>

<table> 
    <tbody>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
    </tbody>
</table>

The top table header is in a fixed position so the table and key will just scroll behind it as a user scrolls the table. I cannot figure out a way to get the TH to match the TDs below like they normally do when combined in the same table. Is there a trick I am unaware of to make them part of the same data set?

Upvotes: 2

Views: 5765

Answers (1)

Naren Murali
Naren Murali

Reputation: 56410

The simplest way is to ensure that both the tables has the same parent element. Then set the width of the th and first rows td tags to relative percentage, so that since both the elements have the same parent, their widths will match also. Like shown below.

html,
body {
  margin: 0px;
}

table {
  width: 100%
}
<table border="1" class="fix">
  <thead>
    <tr>
      <th style="width:20%">One</th>
      <th style="width:20%">Two</th>
      <th style="width:20%">Three</th>
      <th style="width:20%">Four</th>
      <th style="width:20%">Five</th>
    </tr>
  </thead>
</table>

<div>
  <p>Some keys here about what highlighted text below means</p>
</div>

<table border="1">
  <tbody>
    <tr>
      <td style="width:20%">One</td>
      <td style="width:20%">Two</td>
      <td style="width:20%">Three</td>
      <td style="width:20%">Four</td>
      <td style="width:20%">Five</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
    </tr>
  </tbody>
</table>

This was for the table td issue. Now the position fixed for the header can be implemented like so.

html,
body {
  margin: 0px;
}

.fix {
  position: fixed;
  top: 0px;
}

.offset {
  margin-top: 50px;
}

table {
  width: 100%
}
<table border="1" class="fix">
  <thead>
    <tr>
      <th style="width:20%">One</th>
      <th style="width:20%">Two</th>
      <th style="width:20%">Three</th>
      <th style="width:20%">Four</th>
      <th style="width:20%">Five</th>
    </tr>
  </thead>
</table>

<div class="offset">
  <p>Some keys here about what highlighted text below means</p>
</div>

<table border="1">
  <tbody>
    <tr>
      <td style="width:20%">One</td>
      <td style="width:20%">Two</td>
      <td style="width:20%">Three</td>
      <td style="width:20%">Four</td>
      <td style="width:20%">Five</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions