Question

我有这个html块。我需要将内容3显示在内容2下方。内容1非常冗长，填写相当远。

<table>
    <tr>
        <td>(Content 1)</td>
        <td>(Content 2)</td>
        <td>(Content 3)</td>
    </tr>
</table>

http://jsfiddle.net/15uuL43x/

我更喜欢使用jquery。我可以更改css，或转换标签，但我无法将td更改为div或tr。我可以创建新的tr或移动东西。这可能吗？

Answer 1

基本思路是在第一个单元格上设置行跨度，添加一个新行并将最后一个td附加到新行。

var tds = $("tr td");
tds.eq(0).attr('rowspan', '2');
$("<tr/>").append(tds.eq(2)).appendTo("table");

table { border-collapse: collapse; }
td { border : 1px solid black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>(Content 1)</td>
        <td>(Content 2)</td>
        <td>(Content 3)</td>
    </tr>
</table>

Answer 2

您可以将表格单元格重新定义为浮点数：https://jsfiddle.net/efedorenko/15uuL43x/6/

tr {
    overflow: hidden;
}
    .td1 {
        float: left;
        background-color: yellow;
    }
    .td2 {
        float: right;
        background-color: green;
    }
    .td3 {
        clear: right;
        float: right;
        background-color: orange;
    }

如何强制在另一个下面的表行中

2 个答案: