JSFiddle - React, Tailwind, and code Playground
HTML
<div class="small-scroll">
<table class="compendium-horizontal-scroll-table compendium-no-left-right-padding-table compendium-mobile-table">
<thead>
<tr>
<th rowspan="2">
<p>Level</p>
</th>
<th rowspan="2">
<p>Proficiency
<br>Bonus</p>
</th>
<th rowspan="2">
<p>Sorcery
<br>Points</p>
</th>
<th rowspan="2">
<p>Features</p>
</th>
<th rowspan="2">
<p>Cantrips
<br>Known</p>
</th>
<th rowspan="2">
<p>Spells
<br>Known</p>
</th>
<th colspan="9">
<p>—Spell Slots per Spell Level—</p>
</th>
</tr>
<tr>
<th class="spell-level-column">
<p>1st</p>
</th>
<th class="spell-level-column">
<p>2nd</p>
</th>
<th class="spell-level-column">
<p>3rd</p>
</th>
<th class="spell-level-column">
<p>4th</p>
</th>
<th class="spell-level-column">
<p>5th</p>
</th>
<th class="spell-level-column">
<p>6th</p>
</th>
<th class="spell-level-column">
<p>7th</p>
</th>
<th class="spell-level-column">
<p>8th</p>
</th>
<th class="spell-level-column">
<p>9th</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="compendium-mobile-td-label">
Level
</div>
<div class="compendium-mobile-td-value">
<p>1st</p>
</div>
</td>
<td>
<div class="compendium-mobile-td-label">
ProficiencyBonus
</div>
<div class="compendium-mobile-td-value">
<p>+2</p>
</div>
</td>
<td>
<div class="compendium-mobile-td-label">
SorceryPoints
...
CSS
.small-scroll {
overflow: auto;
}
@media (max-width: 768px) {
.small-scroll {
max-height: 400px;
}
}
.compendium-mobile-td-label {
display: none;
}