前端表格合并单元格技巧

JAY.LIN 收录于 Web

2023-03-30 约 1162 字预计阅读 3 分钟

https://bing.ee123.net/img/rand?artid=129854826

前端表格合并单元格技巧

最近做文档处理类的项目，前端涉及到表格合并的处理。

核心思想就是对合并区域的首个格子设置 colspan 和 rowspan 属性，合并几行几列这种。

再对这个格子因为合并向右和向下延伸的格子设置 style=“display：none”; 即可。

图示:

比如1号格子原本是李四，要合并成两行两列的大格子。那么久设置1号格子 colspan=“2” rowspan=“2”，再设置 2,3,4号格子 style=“display: none”。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    table {
      border-collapse: collapse;
      border: 1px #C4C7CE solid;
    }

    th, td {
      padding: 10px;
      width: 100px;
      border: 1px #C4C7CE solid;
      text-align: center;
    }

    #operButton {
      position: absolute;
      left: 600px;
      top: 100px;
    }

    #operButton button {
      width: 100px;
      height: 50px;
    }

  </style>
  <script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<body>
<div>
  <table id="myTable">
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>爱好</th>
      <th>地址</th>
      <th>成绩</th>
    </tr>
    <tbody>
    <tr>
      <td colspan="2">男</td>
      <td style="display: none">蔡徐坤</td>
      <td>20</td>
      <td rowspan="4">篮球</td>
      <td>武汉</td>
      <td>98</td>
    </tr>
    <tr>
      <td>女</td>
      <td>张玲</td>
      <td>19</td>
      <td style="display: none">画画</td>
      <td>成都</td>
      <td>76</td>
    </tr>
    <tr>
      <td>男</td>
      <td colspan="2" rowspan="2">李四</td>
      <td style="display: none">23</td>
      <td style="display: none">上网</td>
      <td>北京</td>
      <td>90</td>
    </tr>
    <tr>
      <td>男</td>
      <td style="display: none">武松</td>
      <td style="display: none">40</td>
      <td style="display: none">打虎</td>
      <td>上海</td>
      <td>80</td>
    </tr>
    <tr>
      <td>女</td>
      <td>赵丽</td>
      <td>29</td>
      <td>染发</td>
      <td>南京</td>
      <td>79</td>
    </tr>
    <tr>
      <td>男</td>
      <td>孙尚香</td>
      <td>30</td>
      <td>射箭</td>
      <td>蜀国</td>
      <td>80</td>
    </tr>
    <tr>
      <td>女</td>
      <td>李萍</td>
      <td>19</td>
      <td>养花</td>
      <td>天津</td>
      <td>70</td>
    </tr>

    </tbody>
  </table>
</div>



</body>
</html>

目录

前端表格合并单元格技巧

前端表格合并单元格技巧