横跨两列 /行的单元格:

本文通过两个示例展示了如何在HTML中实现表格单元格的合并,包括横跨两列和横跨两行的合并方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<html>

<body>

<h4>横跨两列的单元格:</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格:</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

效果图
这里写图片描述

转自http://www.w3school.com.cn/tiy/t.asp?f=html_table_span

const columns = [ { title: ( <div style={{ display: "flex", alignItems: "center" }}> <img src={tableLogo} alt="logo" style={{ width: "15px", height: "12px", marginRight: "8px" }} /> 标段 </div> ), dataIndex: "bidName", key: "bidName", className: "no-before", }, { title: "作业面", dataIndex: "workAreaName", key: "workAreaName", className: "no-before", }, // { // title: "台车", // children: [ { title: "台车", // 空标题 dataIndex: "djRunHistory", key: "djRunHistory", className: "no-before", render: (value: any) => { // 检查是否是对象 if (typeof value === "object" && value !== null) { // 根据实际需求处理对象,例如显示特定字段或转换为字符串 return ( <span style={{ color: "#66FFFF", }} > 凿岩台车 </span> ); // 临时方案,实际应根据业务需求调整 } return <span>{value}</span>; }, }, { title: "台车", // 空标题 dataIndex: "anchorRunHistory", key: "anchorRunHistory", className: "no-before", render: (value: any) => { // 检查是否是对象 if (typeof value === "object" && value !== null) { // 根据实际需求处理对象,例如显示特定字段或转换为字符串 return ( <span style={{ color: "#6666FF", }} > 锚杆台车 </span> ); } return <span>{value}</span>; }, }, { title: "台车", // 空标题 dataIndex: "liningRunHistory", key: "liningRunHistory", className: "no-before", render: (value: any) => { if (typeof value === "object" && value !== null) { return ( <span style={{ color: "#9933FF", }} > 衬砌台车 </span> ); } return <span>{value}</span>; }, }, // ], // }, ];将这个表头的最后三列进列合并
最新发布
06-23
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值