jquery - 如何修复表头？

Question

我想固定表头，这样只有表体会滚动。
我怎样才能做到这一点？

* {
  padding: 0px;
  margin: 0px;
}

body {
  padding: 0px;
  margin: 0px;
}

.responsive {
  max-width: 100%;
  height: auto;
}

.table-striped1>tbody>tr:nth-child(odd)>td,
.table-striped1>tbody>tr:nth-child(odd)>th {
  background-color: #4CACFF;
}

.table-hover1 tbody tr:hover td {
  background-color: #21537F;
  color: #fff;
}

.table-striped2>tbody>tr:nth-child(odd)>td,
.table-striped2>tbody>tr:nth-child(odd)>th {
  background-color: lightgreen;
}

.table-hover2 tbody tr:hover td {
  background-color: green;
  color: #fff;
}

#home,
#menu1 {
  height: 300px;
  overflow: auto;
}

#buttonone {
  position: fixed;
  top: 350px;
  z-index: 1;
}

.rig {
  float: right;
  margin-right: 200px;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active btn btn-info" data-toggle="tab" href="#home">Selected Goods List</a>
  </li>
  <li class="nav-item">
    <a class="nav-link btn btn-success" data-toggle="tab" href="#menu1">Ordered Goods Status</a>
  </li>

</ul>

<!-- Tab panes -->

<div class="tab-content">
  <div id="home" class=" tab-pane active">
    <table class="table table-striped1 table-hover1">

      <thead>
        <tr>
          <th>No</th>
          <th>Selected Goods</th>
          <th>Qut</th>
          <th>Remove</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1</td>
          <td>Keybord</td>
          <td>
            1
          </td>
          <td>
            <a href="veg_menu.html" class="btn btn-danger" role="button">Remove</a>
          </td>
        </tr>

        <tr>
          <td>2</td>
          <td>Mouse</td>
          <td>
            1
          </td>
          <td>
            <a href="veg_menu.html" class="btn btn-danger" role="button">Remove</a>
          </td>
          <tr>
            <td>3</td>
            <td>Moniter</td>
            <td>
              1
            </td>
            <td>
              <a href="veg_menu.html" class="btn btn-danger" role="button">Remove</a>
            </td>
          </tr>
          <tr>
            <td>4</td>
            <td>cabinet</td>
            <td>
              1
            </td>
            <td>
              <a href="veg_menu.html" class="btn btn-danger" role="button">Remove</a>
            </td>
          </tr>
          <tr>
            <td>5</td>
            <td>SMBS</td>
            <td>
              1
            </td>
            <td>
              <a href="veg_menu.html" class="btn btn-danger" role="button">Remove</a>
            </td>
          </tr>
      </tbody>
    </table>
    <div class="rig">
      <a href="#" class="btn btn-success lang " role="button" id="buttonone">Order Selected Goods</a>
    </div>
  </div>


  <div id="menu1" class=" tab-pane fade">
    <table class="table table-striped2 table-hover2">
      <tr>
        <th>No</th>
        <th>Ordered goods</th>
        <th>Qut</th>
        <th>goods Status</th>
      </tr>

      <tr>
        <td>1</td>
        <td>moniter</td>
        <td>
          1
        </td>
        <td>
          sent
        </td>
      </tr>

      <tr>
        <td>2</td>
        <td>Mouse</td>
        <td>
          1
        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>Mouse</td>
        <td>
          1
        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>4</td>
        <td>Mouse</td>
        <td>
          1
        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>5</td>
        <td>keybord</td>
        <td>
          1
        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>6</td>
        <td>keybord</td>
        <td>
          1
        </td>
        <td>

        </td>
      </tr>
      <tr>
        <td>7</td>
        <td>keybord</td>
        <td>
          1
        </td>
        <td>

        </td>
      </tr>
    </table>
    <div class="rig">
      <a href="#" class="btn btn-success lang " role="button" id="buttonone">Total Bill Amount</a>
    </div>
  </div>
</div>

Answer 1

对于 <thead>您可以尝试使用标签

style="position:fixed"

或者

style="position:sticky ; top:0px"

固定表头始终固定在顶部。