Fixed Table Header

Question

I know how to make a fixed table-header a few different ways, however I'm looking for the best way, and I only want to use <table>,<thead>,<tbody>,<tr>,<th>,<td> tags which the HTML spec provides you.

Here is a dummy table structure:

<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>field</th>
            <th>facility</th>
            <th>change</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>name1</td>
            <td>field1</td>
            <td>facility1</td>
            <td>change1</td>            
        </tr>
        <tr>
            <td>2</td>
            <td>name2</td>
            <td>field2</td>
            <td>facility2</td>
            <td>change2</td>            
        </tr>
        <tr>
            <td>3</td>
            <td>name3</td>
            <td>field3</td>
            <td>facility3</td>
            <td>change3</td>            
        </tr>
        <tr>
            <td>4</td>
            <td>name4</td>
            <td>field4</td>
            <td>facility4</td>
            <td>change4</td>            
        </tr>
        <tr>
            <td>5</td>
            <td>name5</td>
            <td>field5</td>
            <td>facility5</td>
            <td>change5</td>            
        </tr>
        <tr>
            <td>6</td>
            <td>name6</td>
            <td>field6</td>
            <td>facility6</td>
            <td>change6</td>            
        </tr>
        <tr>
            <td>7</td>
            <td>name7</td>
            <td>field7</td>
            <td>facility7</td>
            <td>change7</td>            
        </tr>
        <tr>
            <td>8</td>
            <td>name8</td>
            <td>field8</td>
            <td>facility8</td>
            <td>change8</td>            
        </tr>
        <tr>
            <td>9</td>
            <td>name9</td>
            <td>field9</td>
            <td>facility9</td>
            <td>change9</td>            
        </tr>
        <tr>
            <td>10</td>
            <td>name10</td>
            <td>field10</td>
            <td>facility10</td>
            <td>change10</td>           
        </tr>
        <tr>
            <td>11</td>
            <td>name11</td>
            <td>field11</td>
            <td>facility11</td>
            <td>change11</td>           
        </tr>
        <tr>
            <td>12</td>
            <td>name12</td>
            <td>field12</td>
            <td>facility12</td>
            <td>change12</td>           
        </tr>
        <tr>
            <td>13</td>
            <td>name13</td>
            <td>field13</td>
            <td>facility13</td>
            <td>change13</td>           
        </tr>
        <tr>
            <td>14</td>
            <td>name14</td>
            <td>field14</td>
            <td>facility14</td>
            <td>change14</td>           
        </tr>
        <tr>
            <td>15</td>
            <td>name15</td>
            <td>field15</td>
            <td>facility15</td>
            <td>change15</td>           
        </tr>
    </tbody>
</table>

@MaihanNijat I do like that one, but if you add `text-align: center` instead of `:left` the headers become off centered. — Jordan Davis, Jan 28 '16 at 21:24
@Noel using jQuery and or JavaScript is definitely not the best solution. — Jordan Davis, Jan 28 '16 at 22:17

score 2 · Accepted Answer · answered Jan 28 '16 at 21:09

Try this working demo. Below code:

table {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1px;
}

table thead {
  flex: 0 0 auto;
  width: calc(100% - 0.9em);
}

table tbody {
  flex: 1 1 auto;
  display: block;
  overflow-y: scroll;
}

table tbody tr {
  width: 100%;
}

table thead,
table tbody tr {
  display: table;
  table-layout: fixed;
}

tbody td,
thead th {
  border-right: 1px solid transparent;
  vertical-align: middle;
}

thead th {
  height: 35px;
  font-size: 16px;
  text-align: left;
  text-transform: uppercase;
}

tbody td {
  text-align: left;
  height: 30px;
  background: #d5d5d5;
}

.table-cont {
  width: 100%;
  height: 350px;
}

<div class="table-cont">
  <table>
    <thead>
      <tr>
        <th>id</th>
        <th>name</th>
        <th>field</th>
        <th>facility</th>
        <th>change</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>name1</td>
        <td>field1</td>
        <td>facility1</td>
        <td>change1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>name2</td>
        <td>field2</td>
        <td>facility2</td>
        <td>change2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>name3</td>
        <td>field3</td>
        <td>facility3</td>
        <td>change3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>name4</td>
        <td>field4</td>
        <td>facility4</td>
        <td>change4</td>
      </tr>
      <tr>
        <td>5</td>
        <td>name5</td>
        <td>field5</td>
        <td>facility5</td>
        <td>change5</td>
      </tr>
      <tr>
        <td>6</td>
        <td>name6</td>
        <td>field6</td>
        <td>facility6</td>
        <td>change6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>name7</td>
        <td>field7</td>
        <td>facility7</td>
        <td>change7</td>
      </tr>
      <tr>
        <td>8</td>
        <td>name8</td>
        <td>field8</td>
        <td>facility8</td>
        <td>change8</td>
      </tr>
      <tr>
        <td>9</td>
        <td>name9</td>
        <td>field9</td>
        <td>facility9</td>
        <td>change9</td>
      </tr>
      <tr>
        <td>10</td>
        <td>name10</td>
        <td>field10</td>
        <td>facility10</td>
        <td>change10</td>
      </tr>
      <tr>
        <td>11</td>
        <td>name11</td>
        <td>field11</td>
        <td>facility11</td>
        <td>change11</td>
      </tr>
      <tr>
        <td>12</td>
        <td>name12</td>
        <td>field12</td>
        <td>facility12</td>
        <td>change12</td>
      </tr>
      <tr>
        <td>13</td>
        <td>name13</td>
        <td>field13</td>
        <td>facility13</td>
        <td>change13</td>
      </tr>
      <tr>
        <td>14</td>
        <td>name14</td>
        <td>field14</td>
        <td>facility14</td>
        <td>change14</td>
      </tr>
      <tr>
        <td>15</td>
        <td>name15</td>
        <td>field15</td>
        <td>facility15</td>
        <td>change15</td>
      </tr>
    </tbody>
  </table>

</div>

yea I know how to do it this way as well but your using a `
` as the container... — Jordan Davis, Jan 28 '16 at 21:22

Fixed Table Header

1 Answers1

Linked