Hiding a single column on a mobile device using d-none d-md-block works fine, but if I have two adjacent columns I want to hide on mobile, they come out stacked on desktop.
<table width="80%" class="tabTable table-bordered table-striped table-hover">
<tr><th class="d-none d-md-block">Col 1</th><th class="d-none d-md-block">Col 2</th><th>Col 3</th></tr>
<tr><td class="d-none d-md-block">Val 1</td><td class="d-none d-md-block">Val 2</td><td>Val 3</td></tr>
<tr><td class="d-none d-md-block">Val 1</td><td class="d-none d-md-block">Val 2</td><td>Val 3</td></tr>
</table>
Comes out like
Adding style="vertical-align:top;" to the <th> and <td> in the first two columns does not seem to fix the issue.
>Solution :
td has by default diplay:table-cell;. d-md-block changes its diplay to block. Block elements take all the avaialbe space.
Since one of the td has diplay:table-cell; and the other two have display:block, they look so.
Use d-md-table-cell instead of d-md-block every where.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<table width="80%" class="tabTable table-bordered table-striped table-hover">
<tr>
<th class="d-none d-md-table-cell">Col 1</th>
<th class="d-none d-md-table-cell">Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td class="d-none d-md-table-cell">Val 1</td>
<td class="d-none d-md-table-cell">Val 2</td>
<td>Val 3</td>
</tr>
<tr>
<td class="d-none d-md-table-cell">Val 1</td>
<td class="d-none d-md-table-cell">Val 2</td>
<td>Val 3</td>
</tr>
</table>