CODEWITHSUNDEEP
htmlcss
Maysam
Maysam

Reputation: 7367

Split table row into two rows

Is there any way to split a table row into two rows instead of using nested tables?

It's what I want:

my table

td #4 should has full width and I don't know is there any CSS trick or anything to do this or not.

NOTE: I do not want to use another <tr> with colspan. I want it inside the same row within other <td>s, because I'm using striped table.

Upvotes: 21

Views: 76549

Answers (4)

Jose Quijada
Jose Quijada

Reputation: 692

You can embed a <table/> into the cell you want to split:

<html>
<body>
<table> 
  <tr> 
    <th>Name</th> 
    <th>Age</th> 
    <th>City</th> 
  </tr> 
  <tr> 
    <td>John Doe</td> 
    <td>35</td> 
    <td>
    <table>
        <tr>
            <td>New York</td>
        </tr>
        <tr>
            <td>Los Angeles</td>
        </tr>
    </table>
    </td> 
  </tr> 
  <tr> 
    <td>Alias Calvo</td> 
    <td>25</td> 
    <td>Los Angeles</td> 
  </tr> 
  <tr> 
    <td>Jane Smith</td> 
    <td>30</td> 
    <td>Chicago</td> 
  </tr> 
</table> 
</body>
</html>

Upvotes: 0

user5839559
user5839559

Reputation:

you may want to check at this code:

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

Upvotes: 2

DhruvJoshi
DhruvJoshi

Reputation: 17126

Or you can use jQuery to do all this. See the fiddle demo here

HTML code here:

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

And a jQuery handler like:

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

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157294

As you updated your question, another way you can do is to use nested div elements, with display: table-cell; properties

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

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

Demo

Note: Yes, you can float the div as well, which I will prefer more over here, with a self clearing class but I used display: table-cell; so it will retain the properties like vertical-align: middle; which you may need as you are using table

Why not use colspan for this?

Demo

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

Note: Am using border and width attributes here just for demonstration purpose, consider declaring a class and style it using CSS

Upvotes: 8

Related Questions