如何强制<td>在表行内、在另一<td>

How do I force <td> within a table row, below another <td>

本文关键字：td gt lt 何强制      更新时间：2023-09-26

我有这个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更改为divs或tr。我可以创建新的tr或四处移动。这可能吗？

基本想法是在第一个单元格上设置行跨度，添加一个新行，并将最后一个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>

您可以将表单元格重新定义为浮点：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;
    }
相关文章：