19

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.

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Maysam
  • 7,246
  • 13
  • 68
  • 106

4 Answers4

8

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

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • Since I'm using striped table http://www.getuikit.com/docs/table.html this wont work. – Maysam Feb 14 '14 at 12:56
  • @Maysam This is like taking out a new condition each time user updates his answer, can you specify all the do's and dont's in your question? would be really helpful to figure out what you really need, also, I guess you didn't read my updated answer – Mr. Alien Feb 14 '14 at 12:57
  • Sorry but I explained clearly in the question. I want all them in the same row. – Maysam Feb 14 '14 at 12:58
  • @Maysam aren't they in the same row now in my updated answer? – Mr. Alien Feb 14 '14 at 13:00
  • Yes they are, I did not saw the demo at first. – Maysam Feb 14 '14 at 13:02
  • @Maysam As expected :) – Mr. Alien Feb 14 '14 at 13:03
  • One problem with this is it seems semantically incorrect. it feels like each item in the data set should be a single row (tr), not spanning two rows per item. The fact that it looks like two rows is only a detail in the presentation. Also, what if you want to wrap the double-row in a container, for doing things like hover effects over the entire thing? I suppose there's probably no ideal solution that satisfies everything. – broken-e Oct 31 '18 at 06:39
2

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

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);});
    });
SharpC
  • 6,974
  • 4
  • 45
  • 40
DhruvJoshi
  • 17,041
  • 6
  • 41
  • 60
0

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>
Jose Quijada
  • 558
  • 6
  • 13