JSFiddle - React, Tailwind, and code Playground

by stevebeauge

HTML

<div id='main'>
    <table id="zetable">
        <tr>
            <td>
                <div style="background-color:yellow;overflow:auto"><span>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..
                </span> 
                </div>
            </td>
        </tr>
    </table>
</div>
<button id='wrap'>Wrap</button>
<button id='unwrap'>UnWrap</button>

CSS

#zetable {
}
.wrapper {
    height:50px;
    overflow:hidden;
    border:solid 1px green
}

JavaScript

$(function () {
    var zetable = $("#zetable");
    $("#wrap").click(function () {
        zetable.wrap("<div class='wrapper'></div>");
    });
    $("#unwrap").click(function () {
        zetable.unwrap();
    });

});