Question

我需要让标头保持移动或固定，以便它仍然可见，但是表数据内容会滚动。

我尝试将.grdPCO tr th设置为position: fixed，但它会将所有表头都挤压到左侧，然后从表上浮下来。

.grdPCO {
  width: 2000px;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0 auto;
}

.grdPCO tbody {
  display: block;
  width: 100%;
  overflow: auto;
  height: 400px;
  background: #eee;
}

.grdPCO thead tr {
  display: block;
}

.grdPCO thead {
  display: block;
  background: black;
  color: #fff;
}

.grdPCO tr th {
   position: fixed;
}

.grdPCO th,
.grdPCO td {
  padding: 5px 30px;
  text-align: left;
  width: 200px;
}

<table class="grdPCO">
 <tbody>
  <tr>
   <th>Semester</th>
   <th>Course #</th>
   <th>Capacity</th>
  <tr>
  <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
  </tr>
  <tr>
   <td>4</td>
   <td>5</td>
   <td>6</td>
  </tr>
  <tr>
   <td>7</td>
   <td>8</td>
   <td>9</td>
  </tr>
 </tbody>
</table>

我希望th或表头保持固定，以便它们始终显示。

Answer 1

我不确定您要的是什么，但听起来您只是想要粘性标头？例如；

.grdPCO {
  border-collapse: collapse;
}
.grdPCO tbody {
  background: #eee;
}

.grdPCO thead th {
  background: black;
  color: #fff;
  position: sticky;
  top:0;
}

.grdPCO th,
.grdPCO td {
  height: 3rem;
  width: 200px;
  border: gray 1px dotted;  
}

.grdPCO tr:nth-child(odd) {
  background-color: #ddd;
}

scroll down...

<br><br><br><br>
<br><br><br><br>

<table class="grdPCO">
 <thead>
   <tr>
     <th>Semester</th>
     <th>Course #</th>
     <th>Capacity</th>
    <tr>
 </thead>
 <tbody>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
  <tr>
   <td>.</td>
   <td>.</td>
   <td>.</td>
  </tr>
 </tbody>
</table>

<br><br><br><br>
<br><br><br><br>

Answer 2

仅尝试CSS和HTML。

table thead tr {
  display: block;
}

table th,
table td {
  width: 100px;//fixed width
}


table tbody {
  display: block;
  height: 200px;
  overflow: auto; //set tbody to auto
}

<table>
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
  </tbody>


</table>

如何使表头固定在滚动条上？

2 个答案: