JSFiddle - React, Tailwind, and code Playground

by SnackyPete

HTML

display: none;
<div class="tablestuff table">
<table border="1">
<thead>
<tr>
<th id="th1" style="width: 20px">Header1</th>
<th id="th2" style="width: 20px">Header2</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="th1" style="width: 20px">Content1</td>
<td headers="th2" style="width: 20px">Content2</td>
</tr>
</tbody>
</table>
</div>

display: block;
<div class="tablestuff1 table">
<table border="1">
<thead>
<tr>
<th id="th1" style="width: 20px">Header1</th>
<th id="th2" style="width: 20px">Header2</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="th1" style="width: 20px">Content1</td>
<td headers="th2" style="width: 20px">Content2</td>
</tr>
</tbody>
</table>
</div>

display: table-header-group;
<div class="tablestuff2 table">
<table border="1">
<thead>
<tr>
<th id="th1" style="width: 20px">Header1</th>
<th id="th2" style="width: 20px">Header2</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="th1" style="width: 20px">Content1</td>
<td headers="th2" style="width: 20px">Content2</td>
</tr>
</tbody>
</table>
</div>

display: table-cell;
<div class="tablestuff3 table">
<table border="1">
<thead>
<tr>
<th id="th1" style="width: 20px">Header1</th>
<th id="th2" style="width: 20px">Header2</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="th1" style="width: 20px">Content1</td>
<td headers="th2" style="width: 20px">Content2</td>
</tr>
</tbody>
</table>
</div>

display:table-row;
<div class="tablestuff5 table">
<table border="1">
<thead>
<tr>
<th id="th1" style="width: 20px">Header1</th>
<th id="th2" style="width: 20px">Header2</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="th1" style="width: 20px">Content1</td>
<td headers="th2" style="width: 20px">Content2</td>
</tr>
</tbody>
</table>
</div>



(default)
<div class="tablestuff4 table">
<table border="1">
<thead>
<tr>
<th id="th1" style="width: 20px">Header1</th>
<th id="th2" style="width: 20px">Header2</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="th1" style="width: 20px">Content1</td>
<td headers="th2" style="width:...

CSS

.tablestuff thead {
     display: none;
}

.tablestuff1 thead {
     display: block;
}

.tablestuff2 thead {
     display: table-header-group;
}

.tablestuff3 thead {
     display: table-cell;
}

.tablestuff5 thead {
     display: table-row;
}

.table {
    margin-bottom: 20px !important;
}