CODEWITHSUNDEEP
javascriptjqueryhtmlcss
christopher clark
christopher clark

Reputation: 2103

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

I have this block of html. I need Content 3 to display below Content 2. Content 1 is quite lengthy and fills quite far down.

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

http://jsfiddle.net/15uuL43x/

I would prefer using jquery. I can change the css, or transform the tags, but I cannot change the td to divs or tr. I can create new tr's or move things around. Is this possible?

Upvotes: 1

Views: 3408

Answers (2)

efedorenko
efedorenko

Reputation: 31

You can redefine table cells as floats: 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;
    }

Upvotes: 1

epascarello
epascarello

Reputation: 207527

Basic idea would be to set row span on the first cell, add a new row and append the last td to the new row.

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>

Upvotes: 3

Related Questions