问题描述
- html中如何将表格<td>进行拆分
-
问题是这样的：我又一种表格设计方式是这样的，用了html中的<table>,
想实现下面的样式:
但是如果用
table
tr
td /td
td /td
td /td
tr
/table
（没写标签的括号<>是因为会被屏蔽）最后一个单元格就不能分成两行了，各位朋友有什么好方法吗？十分感谢
解决方案
rowspan啊。。跨行
<table border="1">
<tr><td rowspan="2"> </td><td rowspan="2"> </td><td> </td></tr>
<tr><td> </td></tr>
</table>
解决方案二：
从界面上吃拆分行，但从代码上应该从合并行的角度出发。拆分行后，自动添加一行一样的tr，最后一个单元格行合并
解决方案三：
另外可以用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>
时间： 2024-09-01 00:52:14