Question

有没有办法将表行拆分成两行而不是使用嵌套表？

这就是我想要的：
my table

td #4应该有全宽，我不知道是否有任何 CSS 技巧或其他任何操作。

注意：我不想将另一个<tr>与colspan一起使用。我希望它位于其他<td>内的同一行中，因为我使用的是条形表http://www.getuikit.com/docs/table.html。

Answer 1

在您更新问题时，您可以采用的另一种方法是使用带有div属性的嵌套display: table-cell;元素

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

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

Demo

注意：是的，您也可以float div，我会更喜欢在这里，自我清除class但我使用了display: table-cell;，因此它会保留vertical-align: middle;等属性，您可能需要table

为什么不使用colspan呢？

Demo

<table border="1" width="100%">
    <tr>
        <td>Hello</td>
        <td>World</td>
    </tr>
    <tr>
        <td colspan="2">Merged</td>
    </tr>
</table>

注意：此处仅使用border和width属性演示目的，考虑声明class并使用它来设置样式 CSS

Answer 2

或者您可以使用jQuery来完成所有这些。请参阅小提琴演示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>

和jQuery处理程序一样：

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

Answer 3

您可能要检查以下代码：

http://jsfiddle.net/rg0dk576/

HTML

<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>

CSS

* { 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%; }

拆分表行分为两行

3 个答案: