html table表格固定列效果实现

html table表格固定列效果实现

css代码：

.view {
  margin: auto;
  width: 600px;
}

.wrapper {
  position: relative;
  overflow: auto;
  border: 1px solid black;
  white-space: nowrap;
}

.sticky-col {
  position: -webkit-sticky;
  position: sticky;
  background-color: white;
}

.first-col {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  left: 0px;
}

.second-col {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  left: 100px;
}
.end-col {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  right: 150px;
}

html代码

<div class="view">
  <div class="wrapper">
    <table class="table">
      <thead>
        <tr>
          <th class="sticky-col first-col">Number</th>
          <th class="sticky-col second-col">First Name</th>
          <th>Last Name</th>
          <th>Employer</th>
          <th  class="sticky-col end-col">Address</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="sticky-col first-col">1</td>
          <td class="sticky-col second-col">Mark</td>
          <td>Ham</td>
          <td>Micro</td>
          <td   class="sticky-col end-col">us</td>
        </tr>
        <tr>
          <td class="sticky-col first-col">2</td>
          <td class="sticky-col second-col">Jacob</td>
          <td>Smith</td>
          <td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td>
          <td   class="sticky-col end-col">china china china china china china china china china</td>
        </tr>
        <tr>
          <td class="sticky-col first-col">3</td>
          <td class="sticky-col second-col">Larry</td>
          <td>Wen</td>
          <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          <td   class="sticky-col end-col">beijing beijing beijing beijing beijing beijing beijing beijing </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

可结合这篇文章https://blog.p2hp.com/archives/7678实现左右拖动表格效果。

固定头部请参考 https://blog.p2hp.com/archives/7606

同时固定列和头部 https://stackoverflow.com/questions/52353159/positionsticky-cant-get-both-top-and-left-to-work

参考 https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-a-fixed-frozen-left-column-and-a-scrollable-b

最后更新于 2020年12月19日