CODEWITHSUNDEEP
htmlcss
andyw27
andyw27

Reputation: 25

HTML table span, 2 row restricted to first column - css fix possible?

Interesting problem. I have this code:

 <table border="1">
    <tbody>
        <tr>
            <td>
                 col1
             </td>
             <td>
                 col2
             </td>
             <td>
                 col3
             </td>
             <td>
                 col4
             </td>
       </tr>
       <tr style="display: block;">
             <td colspan="4">
                 in ie 11 text only appears in col1
             </td>
       </tr>
    </tbody>
 </table>

Now if this is rendered in IE 11 (or Chrome) the span is broken and the 2nd row is restricted to the first column.

The challenge is I cannot change the html code. I'm looking for CSS only fix that could be applied to elements of the table structure?

Appreciate that this might not be possible, but be interested to know one way or the other.

Upvotes: 1

Views: 111

Answers (1)

StudioTime
StudioTime

Reputation: 24019

Try this:

table tr:nth-child(2) {
    display: table-row !important;
}

If there are multiple rows with the same condition then you can force all rows to behave as they should with:

table tr { 
    display: table-row !important; 
}

Upvotes: 4

Related Questions