【html】 原生table表格实现自定义页面展示效果

【react】 原生table表格实现自定义页面展示效果

一、界面效果截图

二、示例代码

代码共分为js和css 主要根据 设置 colspan 和 rowspan 值，去排列表格。

1.js代码块

//这里只沾了主要布局代码  columns需要定义
<div class="CustomTableShow">
  <div class="table-block">
    <table class="table1" cellspacing="0px">
      <tbody>
        {columns.map((item, index) => {
          return (
            <tr key={index.toString()}>
              {item.map((item2, index2) => {
                return (
                  <td
                    style={{
                      background: item2.back == 1 ? "#f7f7f7" : "",
                    }}
                    key={index2.toString()}
                    rowspan={item2.rowspan}
                    colspan={item2.colspan}
                  >
                    {" "}
                    <div>{item2.name} </div>
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  </div>
</div>

2.css代码块

.CustomTableShow {
  height: 100%  !important;

  background-color: #fff;
  overflow-x: hidden;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
}

.CustomTableShow .table-block {
  margin: 20px;
  width: calc(100% - 40px);
  overflow: auto;
   -webkit-overflow-scrolling:touch;    /* 用于 ios5+ */  
  height: 100%;
  flex: 1;
}

.CustomTableShow .table1 {
  width: 100%;
}

.CustomTableShow table th,
.CustomTableShow table td {
  min-width: 50px;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  border-width: 1px;
  border-style: solid;
  border-color: #e4e4e4;
  text-align: center;
}

.CustomTableShow table th,
.CustomTableShow table td {
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #e4e4e4;
  text-align: left;
  text-align: center;
}

.CustomTableShow table {
  table-layout: fixed;
  word-break: break-all;
}

3.示例 columns

const columns = [
  [
    {
      colspan: 4,
      rowspan: 1,
      name: "姓名",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "OA珠海管理员",
    },
  ],
  [
    {
      colspan: 4,
      rowspan: 1,
      name: "所属分部",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "珠海农商银行",
    },
  ],
  [
    {
      colspan: 4,
      rowspan: 1,
      name: "所属机构",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "信息技术部",
    },
  ],
  [
    {
      colspan: 4,
      rowspan: 1,
      name: "年份",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "2023",
    },
  ],
  [
    {
      colspan: 4,
      rowspan: 1,
      name: "类型",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "1月工资",
    },
  ],
  [
    {
      colspan: 4,
      rowspan: 1,
      name: "基本工资薪档",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "4档",
    },
  ],
  [
    {
      colspan: 4,
      rowspan: 1,
      name: "职级系数",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "2.5",
    },
  ],
  [
    {
      colspan: 1,
      rowspan: 18,
      name: "应发项目",
      back: "1",
    },
    {
      colspan: 3,
      rowspan: 1,
      name: "基本工资",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "40.00",
    },
  ],
  [
    {
      colspan: 3,
      rowspan: 1,
      name: "职级工资",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "13.00",
    },
  ],
  [
    {
      colspan: 1,
      rowspan: 2,
      name: "津补贴",
      back: "1",
    },
    {
      colspan: 2,
      rowspan: 1,
      name: "工龄津贴",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "40.00",
    },
  ],
  [
    {
      colspan: 2,
      rowspan: 1,
      name: "高温津贴",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "100.00",
    },
  ],
  [
    {
      colspan: 1,
      rowspan: 9,
      name: "应发绩效",
      back: "1",
    },
    {
      colspan: 2,
      rowspan: 1,
      name: "预发绩效",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "-4.00",
    },
  ],
  [
    {
      colspan: 1,
      rowspan: 4,
      name: "季度清算及支行月度分配绩效",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "岗位考核绩效",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "997.00",
    },
  ],
  [
    {
      colspan: 1,
      rowspan: 1,
      name: "计价绩效",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "3000.00",
    },
  ],
  [
    {
      colspan: 1,
      rowspan: 1,
      name: "团队考核绩效",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "123.45",
    },
  ],
  [
    {
      colspan: 1,
      rowspan: 1,
      name: "专项绩效",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "1000.46",
    },
  ],
  [
    {
      colspan: 2,
      rowspan: 1,
      name: "职级考核绩效",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "1000.00",
    },
  ],
  [
    {
      colspan: 2,
      rowspan: 1,
      name: "机构调节绩效",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "500.00",
    },
  ],
  [
    {
      colspan: 2,
      rowspan: 1,
      name: "休产假人员绩效",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "0",
    },
  ],
  [
    {
      colspan: 2,
      rowspan: 1,
      name: "奖励绩效",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "4.00",
    },
  ],
  [
    {
      colspan: 1,
      rowspan: 2,
      name: "应扣绩效",
      back: "1",
    },
    {
      colspan: 2,
      rowspan: 1,
      name: "轻微违规扣减绩效",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "100.00",
    },
  ],
  [
    {
      colspan: 2,
      rowspan: 1,
      name: "处分扣减绩效",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "0",
    },
  ],
  [
    {
      colspan: 1,
      rowspan: 2,
      name: "延付绩效",
      back: "1",
    },
    {
      colspan: 2,
      rowspan: 1,
      name: "提留延付绩效",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "100.44",
    },
  ],
  [
    {
      colspan: 2,
      rowspan: 1,
      name: "兑付延付绩效",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "0",
    },
  ],
  [
    {
      colspan: 3,
      rowspan: 1,
      name: "其他应发",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "5000.00",
    },
  ],
  [
    {
      colspan: 4,
      rowspan: 1,
      name: "应发合计",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "11613.47",
    },
  ],
  [
    {
      colspan: 1,
      rowspan: 8,
      name: "应扣项目",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 3,
      name: "社会保险",
      back: "1",
    },
    {
      colspan: 2,
      rowspan: 1,
      name: "养老",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "532.10",
    },
  ],
  [
    {
      colspan: 2,
      rowspan: 1,
      name: "医疗",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "20.03",
    },
  ],
  [
    {
      colspan: 2,
      rowspan: 1,
      name: "失业",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "3.52",
    },
  ],
  [
    {
      colspan: 3,
      rowspan: 1,
      name: "住房公积金",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "1852.00",
    },
  ],
  [
    {
      colspan: 3,
      rowspan: 1,
      name: "企业年金",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "40.00",
    },
  ],
  [
    {
      colspan: 3,
      rowspan: 1,
      name: "预扣个人所得税",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "100.45",
    },
  ],
  [
    {
      colspan: 3,
      rowspan: 1,
      name: "工会费",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "10.00",
    },
  ],
  [
    {
      colspan: 3,
      rowspan: 1,
      name: "其他应扣",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "0",
    },
  ],
  [
    {
      colspan: 4,
      rowspan: 1,
      name: "应扣合计",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "2558.10",
    },
  ],
  [
    {
      colspan: 4,
      rowspan: 1,
      name: "实发工资",
      back: "1",
    },
    {
      colspan: 1,
      rowspan: 1,
      name: "9055.37",
    },
  ],
];