JSFiddle - React, Tailwind, and code Playground
HTML
<table class="container" id="container">
<tr>
<td class="border"></td>
<td align="center" class="middle">
<div class="content">This is a test</div>
</td>
<td class="border"></td>
</tr>
</table>
CSS
.container {
background-color: #ddd;
}
.border {
background-color: blue;
width:10px;
}
td.middle {
width:500px;
}
.content {
margin: auto;
border: 2px solid yellow;
zoom: 0.8;
}
.ie .content {
width:125%;
}
JavaScript
// if it's an IE browser then update the class to "container ie"
if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
document.getElementById("container").className = "container ie";
}