Html 将表格行拆分为两行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21779851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Split table row into two rows
提问by Maysam
Is there any way to split a table row into two rows instead of using nested tables?
有没有办法将表行拆分为两行而不是使用嵌套表？
It's what I want:
这就是我想要的：
td #4should has full width and I don't know is there any CSStrick or anything to do this or not.
td #4应该有全宽，我不知道是否有任何CSS技巧或任何方法可以做到这一点。
NOTE:I do not want to use another <tr>with colspan. I want it inside the same row withinother <td>s, because I'm using striped table, http://www.getuikit.com/docs/table.html.
注意：我不想将另一个<tr>与colspan. 我希望它在其他<td>s的同一行中，因为我使用的是条纹表http://www.getuikit.com/docs/table.html。
采纳答案by Mr. Alien
As you updated your question, another way you can do is to use nested divelements, with display: table-cell;properties
当您更新问题时，另一种方法是使用div带有display: table-cell;属性的嵌套元素
.top_row {
display: table;
width: 100%;
}
.top_row > div {
display: table-cell;
width: 50%;
border-bottom: 1px solid #eee;
}
Note: Yes, you can
floatthedivas well, which I will prefer more over here, with a self clearingclassbut I useddisplay: table-cell;so it will retain the properties likevertical-align: middle;which you may need as you are usingtable
注意：是的，可以
float的div还有，我会更喜欢在这里，具有自清class，但我用display: table-cell;这样它会保留像的属性vertical-align: middle;，你可以为你使用的需要table
Why not use colspanfor this?
为什么不colspan用于这个？
<table border="1" width="100%">
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td colspan="2">Merged</td>
</tr>
</table>
Note: Am using
borderandwidthattributes here just for demonstration purpose, consider declaring aclassand style it using CSS
注意：我在这里使用
border和width属性只是为了演示目的，考虑class使用 CSS声明 a并设置它的样式
回答by DhruvJoshi
Or you can use jQuery to do all this. See the fiddle demo here
或者您可以使用 jQuery 来完成所有这些。在这里查看小提琴演示
HTML code here:
HTML代码在这里：
<table>
<tr id="row1">
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
<tr id="row2">
<td>a2
</td>
<td>b2
</td>
<td>c2
</td>
</tr>
</table>
<button id="b1">click here</button>
And a jQuery handler like:
和一个 jQuery 处理程序，如：
$(document).ready(function(){
$('#b1').on('click',function(){
var v=$('</tr><tr id="row11" colspan=3><td>text</td>');
$('#row1').after(v);});
});
