0

I need to create a table with fixed thead and scrollable tbody. I also need thead columns to be fit to tbody columns.

For example I have table like this:

<table>
  <thead>
    <tr>
      <th>
        aaa
      </th>
      <th>
        aaabbb
      </th>
      <th>
        aaabbbccc
      </th>
      <th>
        aaabbbcccddd
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
  </tbody>
</table>

Have you any ideas to fit thead columns to tbody columns?

kizoso
  • 1,216
  • 2
  • 15
  • 30
bigmeister
  • 1,137
  • 3
  • 13
  • 20

2 Answers2

1

You can set position: fixed for the thead:

* {
  box-sizing: border-box
}

html,
body {
  padding: 0;
  margin: 0
}

th {
  border: 1px solid red
}

td {
  border: 1px solid green
}

table {
  position: relative;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 21px
}

thead {
  position: fixed;
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
}
<table>
  <thead>
    <tr>
      <th>
        aaa
      </th>
      <th>
        aaabbb
      </th>
      <th>
        aaabbbccc
      </th>
      <th>
        aaabbbcccddd
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
  </tbody>
</table>
kizoso
  • 1,216
  • 2
  • 15
  • 30
0

Hope the below snippet helps you

        .fixed_headers {
    width: 300px;
    table-layout: fixed;
    border-collapse: collapse;
  }
  .fixed_headers th {
    text-decoration: underline;
  }
  .fixed_headers th,
  .fixed_headers td {
    padding: 5px;
    text-align: left;
    width: 100px;
  }
  .fixed_headers thead {
    background-color: #333;
    color: #FDFDFD;
  }
  .fixed_headers thead tr {
    display: block;
    position: relative;
  }
  .fixed_headers tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: 300px;
  }
  .fixed_headers tbody tr:nth-child(even) {
    background-color: #DDD;
  }
<table class="fixed_headers">
   <thead>
     <tr>
       <th>Name</th>
       <th>Color</th>
       <th>Description</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Apple</td>
       <td>Red</td>
       <td>These are red.</td>
     </tr>
     <tr>
       <td>Pear</td>
       <td>Green</td>
       <td>These are green.</td>
     </tr>
     <tr>
       <td>Grape</td>
       <td>Purple / Green</td>
       <td>These are purple and green.</td>
     </tr>
     <tr>
       <td>Orange</td>
       <td>Orange</td>
       <td>These are orange.</td>
     </tr>
     <tr>
       <td>Banana</td>
       <td>Yellow</td>
       <td>These are yellow.</td>
     </tr>
     <tr>
       <td>Kiwi</td>
       <td>Green</td>
       <td>These are green.</td>
     </tr>
     <tr>
       <td>Plum</td>
       <td>Purple</td>
       <td>These are Purple</td>
     </tr>
     <tr>
       <td>Watermelon</td>
       <td>Red</td>
       <td>These are red.</td>
     </tr>
     <tr>
       <td>Tomato</td>
       <td>Red</td>
       <td>These are red.</td>
     </tr>
     <tr>
       <td>Cherry</td>
       <td>Red</td>
       <td>These are red.</td>
     </tr>
     <tr>
       <td>Cantelope</td>
       <td>Orange</td>
       <td>These are orange inside.</td>
     </tr>
     <tr>
       <td>Honeydew</td>
       <td>Green</td>
       <td>These are green inside.</td>
     </tr>
     <tr>
       <td>Papaya</td>
       <td>Green</td>
       <td>These are green.</td>
     </tr>
     <tr>
       <td>Raspberry</td>
       <td>Red</td>
       <td>These are red.</td>
     </tr>
     <tr>
       <td>Blueberry</td>
       <td>Blue</td>
       <td>These are blue.</td>
     </tr>
     <tr>
       <td>Mango</td>
       <td>Orange</td>
       <td>These are orange.</td>
     </tr>
     <tr>
       <td>Passion Fruit</td>
       <td>Green</td>
       <td>These are green.</td>
     </tr>
   </tbody>
 </table>
  • When you resize your table to, for example, 100 px - then we have horizontal scrollbar for tbody but thead is still horizontally fixed. Is there any way to make thead horizontally scrollable with tbody? – bigmeister Oct 12 '17 at 06:58