JSFiddle - React, Tailwind, and code Playground

by Cory Danielson

HTML

<h1>table</h1>
<table class="width100pct">
    <tr>
        <td class="hey">Hey there</td>
        <td class="wrap anotherClass">this is some super long text it's table cell is larger</td>
    </tr>
</table>

<br /><br />

<h1>div</h1>
<div class="table width100pct">
    <div class="tr">
        <div class="td hey">Hey there</div>
        <div class="td wrap anotherClass">this is some super long text it's table cell is larger</div>
    </div>
</div>

CSS

.width100pct { width: 100%; }
tr, div.tr { vertical-align: top; }
div.table { display: table; }
div.tr { display: table-row; }
div.td { display: table-cell; }
.hey { background-color: orange; }
.wrap { background-color: green; }
.anotherClass { color: #fff; }


div.replaced { /* do nothing */ }
table.replaced { 
    /* border to show you transformation worked */
    border: 1px solid red;
}

JavaScript

$(document).ready(function(){
//comment out the if statement to check functionality without ie7    
    
if ($.browser.msie && $.browser.version == 7) {
    $('html').addClass('ie7') //<html class="ie7">.. like modernizr
    var elem, elemClass    
    $('div.table').each(function(i, elem) {
        elem = $(elem)
        elemClass = elem.removeClass('table').attr('class') || ''
        elem.wrapInner("<table class='" + elemClass + "' />").children().unwrap()
    })
    $('div.tr').each(function(i, elem) {
        elem = $(elem)
        elemClass = elem.removeClass('tr').attr('class') || ''
        elem.wrapInner("<tr class='" + elemClass + "' />").children().unwrap()
    })  
    $('div.td').each(function(i, elem) {
        elem = $(elem)
        elemClass = elem.removeClass('td').attr('class') || ''
        elem.wrapInner("<td class='" + elemClass + "' />").children().unwrap()
    })
}                    
});