固定表头[重复]

Posted 2023-03-06

【中文标题】固定表头[重复]

【英文标题】：Fixed Table Header [duplicate]

【发布时间】：2016-05-06 10:08:12

【问题描述】：

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

这是一个伪表结构：

<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 我确实喜欢那个，但如果你添加 text-align: center 而不是 :left 标题会偏离中心。

@MaihanNijat 以及偏离中心的滚动条

@Noel 使用 jQuery 或 javascript 绝对不是最好的解决方案。

【参考方案1】：

试试这个working demo。下面的代码：

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>

【讨论】：

是的，我也知道如何做到这一点，但您使用 <div> 作为容器...