【问题标题】:Floating header row浮动标题行
【发布时间】:2016-12-08 02:33:58
【问题描述】:

我一直试图冻结我的第一行,但最后我只看到“Test3”标题浮动。
我在table th {} 下使用了position: fixed;,但没有运气。
有什么建议吗?

html body {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  height: 100%;
  margin: 0;
}
#header {
  background: #0066a1;
  color: #ffffff;
  width: 100%
}
#headerTop {
  padding: 10px;
}
.logo1 {
  float: left;
  font-size: 25px;
  font-weight: bold;
  padding: 0 7px 0 0;
}
.logo2 {
  float: left;
  font-size: 25px;
}
.logo3 {
  float: right;
  font-size: 12px;
  text-align: right;
}
.headerRow1 {
  background: #66a3c7;
  height: 10px;
}
.serverRow {
  background: #000000;
  color: #ffffff;
  font-size: 32px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
}
.sectionRow {
  background: #0066a1;
  color: #ffffff;
  font-size: 13px;
  padding: 1px 5px!important;
  font-weight: bold;
  height: 15px!important;
}
table {
  background: #eaebec;
  border: #cccccc 1px solid;
  border-collapse: collapse;
  margin: 0;
  width: 100%;
}
table th {
  background: #ededed;
  border-top: 1px solid #fafafa;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  padding: 2px 2px;
  text-transform: capitalize;
  position: fixed
}
table tr {
  text-align: center;
  font-size: 13px;
}
table td {
  background: #fafafa;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  padding: 2px 2px;
  font-size: 11px;
}
table td:first-child {
  text-align: left;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr:hover td {
  background: #f2f2f2;
}
table tr:hover td.sectionRow {
  background: #0066a1;
}
<div id="header">
  <div id="headerTop">
    <div class="logo1"></div>
    <div class="logo2">Logo 1</div>
    <div class="logo3">
      <br/>date and time</div>
    <div style="clear:both;"></div>
  </div>
  <div style="clear:both;"></div>
</div>
<div class="headerRow1"></div>
<div class="serverRow">Header</div>
<div class="headerRow1"></div>
<table>
  <colgroup>
    <col/>
    <col/>
    <col/>
    <col/>
    <col/>
    <col/>
    <col/>
    <col/>
    <col/>
    <col/>
    <col/>
    <col/>
    <col/>
    <col/>
    <col/>
  </colgroup>
  <tr>
    <th>test1</th>
    <th>test2</th>
    <th>test3</th>
    <th>test3</th>
    <th>test3</th>
    <th>test3</th>
    <th>test3</th>
    <th>test3</th>
    <th>test3</th>
    <th>test3</th>
    <th>test3</th>
    <th>test3</th>
    <th>test3</th>
    <th>test3</th>
    <th>test3</th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <tddata17</td>
      <td style="background:tomato;">data</td>
      <td>data</td>
      <td>data</td>
      <td style="background:#00ff00;">data</td>
  </tr>

</table>

View on JSFiddle

【问题讨论】:

标签: html css fixed-header-tables


【解决方案1】:

我不确定你的问题,但似乎你想创建一个标题 fixed with scroll ,另一种选择是将你的所有内容包装在一个 div 上并申请所有这些。

其他表头固定示例:codepen.io/tjvantoll/pen/JEKIu

【讨论】:

    【解决方案2】:

    您修复的所有&lt;th&gt; 标记都堆叠在一起。将 fixed 应用于您想要修复的 &lt;tr&gt;

    此外,如果您要修复的顶部 &lt;tr&gt; 是列的标题,则它们应该位于 &lt;thead&gt; 中。那么你的其他&lt;tr&gt;s 应该在&lt;tbody&gt; 中。这也将允许您使用 thead tr 定位您想要在 CSS 中修复的内容。

    或者更好的是,只需将整个 &lt;thead&gt; 修复为 thead {position: fixed}

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-08-12
      • 2011-11-03
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多