I am looking for a solution to toggle the visibility of columns based on the screen size.
For example:
- On screens smaller than 576px, I want 2 columns to be visible
- On screens equal to or larger than 768px, I want 4 columns to be visible
- On screens equal to or larger than 1200px, I want 6 columns to be visible.
Since there are multiple rows involved, I prefer not to have separate tables for each scenario, but simply show or hide columns based on the screen size.
You can view the JS Fiddle demo at: https://jsfiddle.net/tkcynbjk/
<div class="row">
<div class="col-sm-12">
<table class="table table-striped">
<thead>
<tr>
<th class="d-none d-table-cell" scope="col">ALWAYS 1</th>
<th class="d-none d-table-cell" scope="col">ALWAYS 2</th>
<th class="d-none d-table-cell d-md-table-cell" scope="col">MED 1</th>
<th class="d-none d-table-cell d-xl-table-cell" scope="col">XL ONLY 1</th>
<th class="d-none d-table-cell d-md-table-cell" scope="col">MED 2</th>
<th class="d-none d-table-cell d-xl-table-cell" scope="col">XL ONLY 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</div>
</div>