移动端表格（固定首列及表头）

先看效果

关于移动端表格

移动端的UI框架大都没有表格组件，pc端的UI框架都是几个表格组合实现固定，然后通过js处理实现同步滚动。这样的好处是容易实现，pc端也不会出现什么问题。但是在手机端时，会有严重的不同步滚动现象，处理的不好时，甚至会出现错位等，体验非常不好。所以在移动端几乎没有可满足我需求的表格！

关于固定首列及表头

本次实现主要用到的是css的两个属性

  • table-layout: fixed 
  • posotion: sticky

table-layout（固定表格布局）

固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

table {
 table-layout: fixed;
 width: 100%;
}

posotion: sticky（ 粘性定位）

sticky 英文字面意思是粘，粘贴，所以姑且称之为粘性定位， sticky的表现类似于relative和fixed的合体，在超过目标区域时，他会固定于目标位置 ；

注意: posotion: sticky应用于table时，只能作用于<th>和<td>，并且必须定义目标位置left / right / top / bottom来实现固定效果

thead tr th {
 position:sticky;
 top:0;
}

简单了解这两个属性后，建立一个带表格的html页面

复制代码
<div class="table_detail">
    <table>
      <thead>
        <tr>
          <th>表头0</th>
          <th>表头1</th>
          <th>表头2</th>
          <th>表头3</th>
          <th>表头4</th>
          <th>表头5</th>
          <th>表头6</th>
          <th>表头7</th>
          <th>表头8</th>
          <th>表头9</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>汇总0</th>
          <th>汇总1</th>
          <th>汇总2</th>
          <th>汇总3</th>
          <th>汇总4</th>
          <th>汇总5</th>
          <th>汇总6</th>
          <th>汇总7</th>
          <th>汇总8</th>
          <th>汇总9</th>
        </tr>
      </tfoot>
    </table>
  </div>
复制代码

css部分

复制代码
<style lang="less" scoped>
.table_detail{
  overflow:auto;
  width: 100%;
  /* 固定滚动高度 */
  max-height: calc(100vh - 220px);
  border-top: 1px solid #EBEBEB;
  border-bottom: 1px solid #EBEBEB;
  border-right: 0;
  table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
  }
  td, th {
    border-right: 1px solid #EBEBEB;
    border-bottom :1px solid #EBEBEB;
    width:70px;
    //height:40px;
    color: #333;
    box-sizing: border-box;
    background-color: #ffffff;
    font-size: 12px;
    text-align: center;
    padding: 5px 5px 5px 0;
  }
  th {
    background: #FAFAFA;
    color: #999;
    font-weight: normal;
  }
  // 固定首列
  td:first-child,
  th:first-child {
    width:100px;
    position:sticky;
    left:0;
    z-index:1;
    padding-left: 5px;
  }
  // 固定表头
  thead tr th {
    position:sticky;
    top:0;
  }
  th:first-child{
    z-index:2;
  }
  // 固定表头
  tfoot tr th {
    position:sticky;
    bottom:0;
    color: #333;
    font-weight: bold;
    border-bottom: 0;
  }
  th:first-child{
    z-index:2;
  }
}
</style>
复制代码

 

最后备注：

  • z-index很重要，需要仔细设置，尤其是对于ios
  • 如果是固定多列，每一列需要注意设置好left的值
  • 使用vue框架，ie的话兼容性很不好，不考虑
posted @   ·灯  阅读(4220)  评论(1)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示