1

I'd like to keep this table header fixed, the problem is when I set the thead position to fixed it loses its size. Basically, I just want to keep the thead from moving with the rest of the table but with its original shape and size.

Thanks in advance.

table {
  margin: 100 0 100 0;
  width: 100%;
}
th,
td,
table {
  /*word-wrap: break-word;*/
  border: 1px solid black;
  border-radius: 3px;
}
body {
  overflow: hidden;
}
.scrollable {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
thead {
  position: fixed;
  width: 100%;
}
.myHead {
  width: auto;
  border: 11px solid blue;
}
<!DOCTYPE html>
<html>

<head>
  <title>MyTable</title>
</head>

<body>
  <div class="scrollable">
    <table>

      <thead>

        <tr class="myHead">
          <th class="header" align="center">Title</th>
          <th class="header" align="center">Title</th>
        </tr>

      </thead>

      <tbody>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>

      </tbody>
    </table>
  </div>
  <div>----------------200px--------------></div>
</body>

</html>
Kyle
  • 1,568
  • 2
  • 20
  • 46
  • Check this out: http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/ – boszlo Jul 14 '15 at 14:31
  • @boszlo I've checked it out, but it's way more things than I expected, I don't want to use over 1000 lines (After cleaning it up) to create a simple table. – Kyle Jul 14 '15 at 14:59
  • 1
    Sure, there's a simpler option as well: http://stackoverflow.com/questions/11499973/how-to-fixed-table-header-no-jquery – boszlo Jul 14 '15 at 15:07

1 Answers1

1

Check out this question as it provides several resources that may help you solve your problem: Freeze the top row for an html table only (Fixed Table Header Scrolling)

(Couldn't post a comment because I don't have the required reputation)

Community
  • 1
  • 1
FWDekker
  • 1,823
  • 2
  • 20
  • 26