修复了表头

Question

我知道如何以几种不同的方式制作固定的表头，但是我正在寻找最好的方法，我只想使用HTML规范为您提供的<table>，<thead>，<tbody>，<tr>，<th>，<td>标签。

下面是一个虚拟表结构：

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

Answer 1

试试这个工作演示。下面的代码：

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>