html中如何将表格<td>进行拆分

问题是这样的:我又一种表格设计方式是这样的,用了html中的

 <table>

,
想实现下面的样式:
图片说明

但是如果用
table
tr
td /td
td /td
td /td
tr
/table
(没写标签的括号<>是因为会被屏蔽)

最后一个单元格就不能分成两行了,各位朋友有什么好方法吗?十分感谢

4个回答

rowspan啊。。跨行


<table border="1">
<tr><td rowspan="2">&nbsp;</td><td rowspan="2">&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
</table>

从界面上吃拆分行,但从代码上应该从合并行的角度出发。拆分行后,自动添加一行一样的tr,最后一个单元格行合并

qingyuanluofeng
天地一扁舟 朋友,您好,您能具体写一下代码吗,我不是很清楚,谢谢了
5 年多之前 回复

另外可以用display的方式

 <style>
.r{
  display:table-row;
  border:1px solid black;
}
.c{
  display:table-cell;
  border:1px solid black;
}
</style>
<div class='c'>111</div><div class='c'>222</div>
<div class='c'>
    <div class='r'>adfasd</div>
    <div class='r'>adfasd</div>
</div>

类似下面这样,不过是不够严谨的,如果拆分多了就得整个table自己重写计算了。建议用display:table-row;和display:table-cell;的方式,那样拆分没那么多限制

 <!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
function divTd2(e){
  var tr = $(e).parent();
  if(tr.length>0){
     for(var i=0;i<tr[0].cells.length;i++){
          var cell = tr[0].cells[i];
          if(cell.cellIndex!=e.cellIndex){
              cell.rowSpan=cell.rowSpan+1;
          }
     }
     tr.parent().append("<tr><td onclick='divTd2(this)'>333</td></tr>");
  }

}
</script>
</head>
<body> 
<table id="tb" border=1>
    <tr><td onclick='divTd2(this)'>111</td><td  onclick='divTd2(this)'>222</td></tr>
</table>
</body>
</html>

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问