发表新帖
发表新帖

Fixed Table Header using CSS

前端 未结
关注
3 1612
离开以前
离开以前 2021-01-21 18:05

How to have a fix thead at the top? I tried the below script but it didn\'t fixed on scrolling.

相关标签:
3条回答
  • 甜味超标
    2021-01-21 18:40 
    table {
   width: 100% (or the preferred value);
}

thead {
    position: fixed;
    top: 0;
    background: khaki;
    color: white;
    width: 100%;
}
    0 讨论(0)
  • 别跟我提以往
    2021-01-21 18:42

    It is impossible to manipulate thead element. Only elements of th individually.

    thead tr:first-child th {
  position: sticky;
  top: 0;
}

thead th {
  position: sticky;
  top: 20px;
  background: khaki;
  color: white;
}
    <table class="table table-striped table-hover table-bordered text-center">
  <thead>
    <tr>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
    </tr>
    <tr>
      <th>gfdg</th>
      <th>gdrgr</th>
      <th>segsre</th>
      <th>gfrdg</th>
      <th>srgdr</th>
      <th>egrsdg</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>


    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>


    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>


    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
  </tbody>
</table>

    Or add the two tr into one.

    <thead>
  <tr>
    <th>
      <input class="form-control" id="myInput" type="text" placeholder="Search..">
      <div>gfdg</div>
    </th>
    ...

    And then only this style is enough.

    thead th {
  position: sticky;
  top: 0;
  background: khaki;
  color: white;
}
    0 讨论(0)
  • 抹茶落季
    2021-01-21 18:44

    I have made another solution if you want to check it here:

    https://codepen.io/patridc/pen/aeLGbo

    thead{
    top: 0;
    z-index: 1;
}

<table class="table table-striped table-hover table-bordered text-center">
    <thead class="position-sticky d-block bg-white">
        <tr class="d-flex bg-white">
  <th class="col-md-2"><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
  <th class="col-md-2"><input class="form-control" id="myInput" type="text" placeholder="Search.."></>
  <th class="col-md-2"><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
  <th class="col-md-2"><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
  <th class="col-md-2"><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
  <th class="col-md-2"><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
</tr>
<tr class="d-flex">
  <th class="col-md-2">gfdg</th>
  <th class="col-md-2">gdrgr</th>
  <th class="col-md-2">segsre</th>
  <th class="col-md-2">gfrdg</th>
  <th class="col-md-2">srgdr</th>
  <th class="col-md-2">egrsdg</th>
</tr>
</thead>
<tbody class="mt-50 d-block">
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
</tbody>
</table>
    0 讨论(0)
 看不清?
提交回复
热议问题