Html 将表行拆分为两行

有没有办法将一个表行拆分为两行，而不是使用嵌套表

这就是我想要的：

td#4

应该是全宽的，我不知道是否有任何CSS技巧或任何东西可以做到这一点

---

注意：我不想将另一个

用于

colspan

。我希望它在其他

s中的同一行中，因为我正在使用。

当您更新问题时，另一种方法是使用嵌套的

div

元素和

显示：表格单元格属性

.top_row {
    display: table;
    width: 100%;
}

.top_row > div {
    display: table-cell;
    width: 50%;
    border-bottom: 1px solid #eee;
}


注意：是的，您也可以使用
float
div

，我更喜欢它 在这里，有一个自动清除的

类

，但我使用了

显示：
表单元因此它将保留属性，如
垂直对齐：
中间使用
表时可能需要的代码


为什么不用这个



你好
世界
合并

注意：我在这里使用
边框
和
宽度
属性只是为了
演示目的，考虑声明<代码>类< /代码>并使用它。
CSS

或者您可以使用jQuery来完成所有这些。看小提琴演示

此处的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>


A.
B
C
a2
b2
c2
点击这里

和jQuery处理程序，如：

$(document).ready(function(){
    $('#b1').on('click',function(){
        var v=$('</tr><tr id="row11" colspan=3><td>text</td>'); 
        $('#row1').after(v);});
    });

$（文档）.ready（函数（）{
$（'#b1'）。在（'单击'，函数（）上）{
变量v=$（'text'）；
$（#row1'）。在（v）；}之后；
});
您可能需要检查以下代码：

http://jsfiddle.net/rg0dk576/

HTML

colspan
不适合你吗？所以td#4有
colspan=3
我想
td#4
在其他
tds
中的行内。如果使用css来管理高度，看起来会是这样的……因为我使用的是条带表，这不起作用。@Maysam这就像每次用户更新答案时拿出一个新条件，你能详细说明你的问题中所有的注意事项吗？如果你能弄清楚你真正需要什么，那会很有帮助。另外，我猜你没有读我的最新答案。对不起，我在问题中解释得很清楚。我希望它们都在同一行。@Maysam在我更新的答案中，它们现在不是在同一行吗？是的，一开始我没有看到演示。这不起作用：新添加的行没有包含全部三列，只是扩展了第1列。
http://jsfiddle.net/rg0dk576/

<table class='normal' border="1" width="100%">
<caption> This is a normal table look&feel </caption>
    <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
    <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
    <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
    <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
    <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>

</table>

<br>

<table class='multirow' border="1" width="100%">
<caption> This is the same table with rows splitted into multiple rows, only by using CSS </caption>
    <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
    <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
    <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
    <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
    <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
</table>

* { box-sizing:border-box; }

td:nth-child(even) { background-color: #0000AA22; }

tr:nth-child(even) { background-color: lightgreen; }

.multirow td { display: inline-block !important; width: auto; border: 1px solid #eee; }

.multirow td:nth-child(1), 
.multirow td:nth-child(2), 
.multirow td:nth-child(3) { width: 33%; }
.multirow td:nth-child(4) { width: 100%; }
.multirow td:nth-child(5), 
.multirow td:nth-child(6) { width: 50%; }