Displaying 2 Columns In A Same Row And Another In 2nd Row Within A Single Tr

Question

What I made,

Month Savings

January

$1

Solution 1:

Given your table structure you should be able to achieve what you want by using the following styles. The trick is to turn the table back into block elements and then style them. Please note the nth child element of this is based on 2 columns - if you had three columns as in your second example, then it would be 3n+1

table, table * {
    display:block;
    box-sizing:border-box;
}
table {
    padding:3px003px;
    border: 1px solid black;
    width:299px;
}
table:after {
    content:'';
    display:block;
    height:0;
    clear:both;
}
th, td {
    border: 1px solid black;
    width:144px;
    margin-bottom:3px;
    margin-right:3px;
    float:left; 
    
}
th:nth-child(2n + 1), td:nth-child(2n + 1) {
    clear:left;
}
.newline {
    float:none;
    width:291px;
}

<table><tr><th>Month</th><thcolspan="2">Savings</th></tr><tr><td>January</td><tdcolspan="2">$100</td></tr><tr><td>February</td><tdcolspan="2">$100</td></tr><tr><td>A: $10</td><td>B: $15</td><tdclass="newline">Sum: $25</td></tr></table>

Please note I have added colspans to the above table to make your html valid for when css is disabled

Solution 2:

This is not IE8 bug, instead your markup is not correct.

You need to merge the column on top like this <td colspan="1" rowspan="3"></td>

   <tr>
       <td colspan="2">Sum: $25</td>
    </tr>

http://jsfiddle.net/t77remtc/2/

new version: http://jsfiddle.net/t77remtc/13/

JavaScript Frameworks

Displaying 2 Columns In A Same Row And Another In 2nd Row Within A Single Tr

Solution 1:

Solution 2:

Post a Comment for "Displaying 2 Columns In A Same Row And Another In 2nd Row Within A Single Tr"