原生table表格固定列 | 滚动条 | 自适应宽度 | 合并行列 |复杂多表头

随着现在UI框架组件的完善和丰富，各种原生属性都衍生出了对应的属性字段，经过封装转换也变得更加好用。需要什么功能添加对应的属性字段即可。但是，脱离哪些组件框架之后，一个最朴素的网页往往只需要最简单的代码。

比如实现：一个固定表格和列的表格，表格内容自适应宽度。且整个表格内容限制在某个div中，超出内容显示滚动条

单html代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .table {
        width: 700px;
        height: 300px;
        overflow: auto;
        margin: 50px auto;
      }
      .table-container {
        /* position: relative; */
        /* overflow: auto; */
      }
      .table .table-container table {
         width: max-content;
      }
      .table table tr {
        /* position: relative; */
      }
      .table table thead{
        z-index: 10;
        position: sticky;
        top: 0;
        height: 50px;
        background: #fff;
      }
      .table table td {
        border: 1px solid #ebeef5;
        padding: 8px 10px;
        font-size: 14px;
        color: #666;
      }
      .table .table-container .fixed {
        position: sticky;
        left: 0;
        background-color: #fff;
      }
      .table .table-container .fixed1{
        position: sticky;
        left: 50px;
        background-color: #fff;
      }
      
    </style>
  </head>
  <body>
    <div>
      <div>
        <table border="0" cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <td >序号</td>
              <td >物种</td>
              <td >年龄</td>
              <td >描述</td>
              <td >体重</td>
              <td >肤色</td>
              <td >牙齿</td>
              <td >健康</td>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>张张三张三张三三</td>
              <td>人</td>
              <td>12</td>
              <td>你是一条神奇的天路，你是一条你是一条神奇的天路，你是一条神奇的天路神奇的天路</td>
              <td>136</td>
              <td>黑</td>
              <td>白</td>
              <td>良好</td>
            </tr>
            <tr>
              <td>张三</td>
              <td>人</td>
              <td>12</td>
              <td>你是一条神奇的天路</td>
              <td>136</td>
              <td>黑</td>
              <td>白</td>
              <td>良好</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>人</td>
                <td>12</td>
                <td>你是一条神奇的天路</td>
                <td>136</td>
                <td>黑</td>
                <td>白</td>
                <td>良好</td>
              </tr>
              <tr>
                <td>张三</td>
                <td>人</td>
                <td>12</td>
                <td>你是一条神奇的天路</td>
                <td>136</td>
                <td>黑</td>
                <td>白</td>
                <td>良好</td>
              </tr>
              <tr>
                <td>张三</td>
                <td>人</td>
                <td>12</td>
                <td>你是一条神奇的天路</td>
                <td>136</td>
                <td>黑</td>
                <td>白</td>
                <td>良好</td>
              </tr>
              <tr>
                <td>张三</td>
                <td>人</td>
                <td>12</td>
                <td>你是一条神奇的天路</td>
                <td>136</td>
                <td>黑</td>
                <td>白</td>
                <td>良好</td>
              </tr>
              <tr>
                <td>张三</td>
                <td>人</td>
                <td>12</td>
                <td>你是一条神奇的天路</td>
                <td>136</td>
                <td>黑</td>
                <td>白</td>
                <td>良好</td>
              </tr>
              <tr>
                <td>张三</td>
                <td>人</td>
                <td>12</td>
                <td>你是一条神奇的天路</td>
                <td>136</td>
                <td>黑</td>
                <td>白</td>
                <td>良好</td>
              </tr>
              <tr>
                <td>张三</td>
                <td>人</td>
                <td>12</td>
                <td>你是一条神奇的天路</td>
                <td>136</td>
                <td>黑</td>
                <td>白</td>
                <td>良好</td>
              </tr>
              <tr>
                <td>张三</td>
                <td>人</td>
                <td>12</td>
                <td>你是一条神奇的天路</td>
                <td>136</td>
                <td>黑</td>
                <td>白</td>
                <td>良好</td>
              </tr>
              <tr>
                <td>张三</td>
                <td>人</td>
                <td>12</td>
                <td>你是一条神奇的天路</td>
                <td>136</td>
                <td>黑</td>
                <td>白</td>
                <td>良好</td>
              </tr>
          </tbody>
        </table>
      </div>
    </div>
    <script>
     
    </script>
  </body>
</html>

这里自适应宽度主要用到了 width:max-content属性，除此之外还有一种属性：<td nowrap >单元格内容</td>；强制不换行，来达到让表格根据内容自适应宽度。

合并行列多级表格的情况：

单html代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>保险信息表格</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    table,
    th,
    td {
      border: 1px solid #ccc;
    }

    th,
    td {
      padding: 8px;
      text-align: center;
    }
    .sticky-col {
        position: sticky; /* 使用 sticky 定位 */
        left: 0;
        background-color: #f2f2f2; /* 背景颜色 */
        z-index: 1; /* 层叠上下文 */
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>

<body>
  <table style="border-collapse: collapse;width: 100%;">
    <thead>
      <tr>
        <th nowrap>序号</th>
        <th nowrap>保单号</th>
        <th nowrap>是否续保</th>
        <th nowrap>续保单号</th>
        <th nowrap>有效日期</th>
        <th nowrap>社保投保</th>
        <th nowrap>操作</th>
        <th nowrap>险种代码</th>
        <th nowrap>险种名称</th>
        <th nowrap>保额</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="4">22</td>
        <td rowspan="4">G1122</td>
        <td rowspan="4">是</td>
        <td rowspan="4">XB1122</td>
        <td rowspan="4" nowrap>20240101-20250101</td>
        <td rowspan="4">有</td>
        <td rowspan="4" nowrap><a href="#">投保记录</a></td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td colspan="3">
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>责任代码</th>
                <th>责任名称</th>
                <th>限额</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>9527</td>
                <td>住院保险</td>
                <td>1000</td>
              </tr>
              <tr>
                <td>2</td>
                <td>9527</td>
                <td>住院保险</td>
                <td>1000</td>
              </tr>
              <tr>
                <td>2</td>
                <td>9527</td>
                <td>住院保险</td>
                <td>1000</td>
              </tr>
              <tr>
                <td>2</td>
                <td>9527</td>
                <td>住院保险</td>
                <td>1000</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td colspan="3">
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>责任代码</th>
                <th>责任名称</th>
                <th>限额</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>9527</td>
                <td>住院保险</td>
                <td>1000</td>
              </tr>
              <tr>
                <td>2</td>
                <td>9527</td>
                <td>住院保险</td>
                <td>1000</td>
              </tr>
              <tr>
                <td>2</td>
                <td>9527</td>
                <td>住院保险</td>
                <td>1000</td>
              </tr>
              <tr>
                <td>2</td>
                <td>9527</td>
                <td>住院保险</td>
                <td>1000</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>

      <tr>
        <td rowspan="2">1</td>
        <td rowspan="2">G1122</td>
        <td rowspan="2">是</td>
        <td rowspan="2">XB1122</td>
        <td rowspan="2">20240101-20250101</td>
        <td rowspan="2">有</td>
        <td rowspan="2"><a href="#">投保记录</a></td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td colspan="3">
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>责任代码</th>
                <th>责任名称</th>
                <th>限额</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>9527</td>
                <td>住院保险</td>
                <td>1000</td>
              </tr>
              <tr>
                <td>2</td>
                <td>9527</td>
                <td>住院保险</td>
                <td>1000</td>
              </tr>
              <tr>
                <td>2</td>
                <td>9527</td>
                <td>住院保险</td>
                <td>1000</td>
              </tr>
              <tr>
                <td>2</td>
                <td>9527</td>
                <td>住院保险</td>
                <td>1000</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

主要就是对 rowspan colspan的理解和使用罢了。当然这些也算不上特别复杂。但是如果你真的遇到了，也算的上特别实用的一种。借此没准就让你有了新的想法，能帮助你解决你的一时之需也说不定。

表情

OωO
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
(｡•ˇ‸ˇ•｡)

颜文字

验证码：

取消回复

刘郎 03-03

回复

如果单用html代码写后期的代码数据不太方便维护
1. 流情 (作者) 03-04
  
  回复
  
  @刘郎
  但是在遇到一些老项目的时候就只能用原生，不然我也不会写这篇博客了（╯‵□′）╯︵┴─┴

原生table表格 固定列 | 滚动条 | 自适应宽度 | 合并行列 |复杂多表头

原生table表格固定列 | 滚动条 | 自适应宽度 | 合并行列 |复杂多表头