Table example

Div required for overflow to work

HTML

<html>
This table hides overflow...
   <div class=shell><table class="data" id="data"><tbody>
<tr>
        <th><div>0</div></th>
        <th><div>Multiplex #</div></th>
        <th><div>ID</div></th>
        <th><div>Sample Name</div></th>
        <th><div>Conc. (ng/ul)</div></th>
        <th><div>Vol. (uL)</div></th>
        <th><div>Sample Type</div></th>
        <th><div>Organism</div></th>
        <th><div>QC Conc. (ng/uL)</div></th>
        <th><div>QC RIN</div></th>
        <th><div>Seq Lib Protocol</div></th>
        <th><div>@seqPrepByCore</div></th>
        <th><div>Index Tag A</div></th>
        <th><div>Index Tag</div></th>
        <th><div>Ave Insert Size</div></th>
        <th><div>QC Frag Size (from)</div></th>
        <th><div>QC Frag Size (to)</div></th>
        <th><div>QC Status</div></th>
        <th><div>Seq Lib Prep Status</div></th>
        <th><div>Core to prep lib?</div></th>
        <th><div>Seq Lib Conc. ng/uL</div></th>
</tr>
</table></div>

This table wraps instead of hiding....
<div class='shell'>
<table class="data2" id="data"><tbody>
<tr>
        <th>0</th>
        <th>Multiplex #</th>
        <th>ID</th>
        <th>Sample Name</th>
        <th>Conc. (ng/ul)</th>
        <th>Vol. (uL)</th>
        <th>Sample Type</th>
        <th>Organism</th>
        <th>QC Conc. (ng/uL)</th>
        <th>QC RIN</th>
        <th>Seq Lib Protocol</th>
        <th>@seqPrepByCore</th>
        <th>Index Tag A</th>
        <th>Index Tag</th>
        <th>Ave Insert Size</th>
        <th>QC Frag Size (from)</th>
        <th>QC Frag Size (to)</th>
        <th>QC Status</th>
        <th>Seq Lib Prep Status</th>
        <th>Core to prep lib?</th>
        <th>Seq Lib Conc. ng/uL</th>
</tr>
</table>
</div>

</html>

CSS

.shell{
                width:100%;
                overflow:scroll;
                }
        div :not(.shell){
                max-height:1em;
                margin:auto;
                resize:horizontal;
                overflow:hidden;
                text-overflow:ellipsis;
        }
        table{
                width:100%;
                overflow:scroll;
        }
        
        table.data2 th {
                max-height:1em;
                margin:auto;
                resize:horizontal;
                overflow:hidden;
                text-overflow:ellipsis;
   
        }

        table.data2 th { white-space: nowrap; max-width: 70px; }