JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<table>
    <thead>
        <tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td>Col 3</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1.1<br />Has image<img src="http://placehold.it/150x150"/></td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3<br />Has image<img src="http://placehold.it/350x150"/></td>
        </tr>
    </tbody>
</table>

CSS

table thead {
    background-color: #ccc;
    font-weight: bold;
}
table td {
    border: 1px solid #aaa;
    padding: 1em;
    vertical-align: top;
}
table td > div {
    position: relative;
}
table img {
    opacity: .5;
    position: absolute;   
    top: 0;
    left: 0;
    z-index: 999;
}

JavaScript

$(document).ready(function() {
   $("td").wrapInner('<div />'); 
});