JSFiddle - React, Tailwind, and code Playground

by johntrepreneur

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="div1">
    <table id="table1">
        <colgroup>
            <col id="col1"/>
            <col id="col2"/>
            <col id="col3"/>
            <col id="col4"/>
        </colgroup>
        <tbody>
            <tr>
                <td id="cell1">John Rissone</td>
                <td id="cell2" class="inactive">InactiveDay</td>
                <td id="cell3">Active Day</td>
                <td id="cell4" class="inactive">InactiveDay</td>
           </tr>
            <tr>
                <td id="cell1">Jonanthon Bartholomule Sketchokowsky</td>
                <td id="cell2" class="inactive">InactiveDay</td>
                <td id="cell3">Active Day</td>
                <td id="cell4" class="inactive">InactiveDay</td>
           </tr>
       </tbody>
    </table>
</div>

CSS

div{
    width: 800px;
    height: 50px;
    background-color: grey;
}
#table1{
    border: solid 1px #000;
    background-color: orange;
    table-layout: fixed;
    width: 95%;
    /*
    display: inline-table;
    display: table-row-group;
    display: table;*/
}
tbody {
    display: table-row-group;
}
colgroup{
    display: table-column-group;
}
col{
    display: table-column;
}
td{
    border: solid 1px black;
    display: table-cell;
    overflow: hidden;
    white-space: nowrap;
}
td > div{
    background-color: lightgreen; 
    /*min-width: 150px;*/
    max-width: 250px;
    width: 150px;
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
}
#col1{
    background-color: pink;
    /*width: 350px; /*acts as max-width when display is table-row-group, but cell still won't size below it's content; without display specified, it acts as a fixed width */
    /*min-width: 340px; /* acts as fixed width when display is table-row-group; works as expected when used in conjunction with width but stops at content size */
}
#col3{
    background-color: lightyellow; 
    width: 150px;
}
#col2, #col4{
    background-color: lightgrey;
}
#cell1{
}
#cell2{
}
#cell3 {
}
#cell4 {
}

JavaScript

$('#div1').resizable({handles: 'e'});

/*
    display: inline;
    display: inline-block;
    display: block;
    display: table;
    display: inline-table;
    display: table-row-group;
    display: table-column-group;
    display: table-header-group;
    display: table-footer-group;
    display: table-cell;
    display: table-column;
*/