JSFiddle - React, Tailwind, and code Playground

by Ilmv

HTML

<div>
    <table>
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>This is a really, really, really, really long column</td>
                <td>Foo</td>
                <td>Bar</td>
                <td>Boo</td>
            </tr>
        </tbody>
    </table>
    
    <br />
    
    <table class="cloned">
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>This is a really, really, really, really long column</td>
                <td>Foo</td>
                <td>Bar</td>
                <td>Boo</td>
            </tr>
        </tbody>
    </table>
    
</div>

CSS

div {
 border: 1px solid red;
  position: relative;  
}

table {
    width: 100%; 
}

table.cloned {
 position: absolute;
    top: 0;
    margin-top: -2px;
}
th, td {
    border: 1px solid black;   
}

.cloned tbody {
 visibility: hidden;  
   line-height: 0; 
}

JavaScript

// I need to completely hide tbody whilst maintaining the column widths
// in thead.

// display: none; will NOT maintain the column widths
// visibility: hidden; does, but the table height remains even though
//    tbody isn't visible. I cannot set height: 0;