Creating a page I ran into the inconvenience of not being able to hide a certain column of a table when the screen size is sm or less. I tried the following class in thead:
<th class="d-none d-sm-block" scope="col">DESCRIPCIÓN</th>
I applied it also in each row of the DESCRIPTION column of the table. The DESCRIPTION header as well as each row of that column is hidden on sm or lower screens, but the problem is that the column is completely empty. My table code is as follows:
<div class="table-responsive">
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th scope="col">ARTICULO</th>
<th class="d-none d-sm-block" scope="col">DESCRIPCIÓN</th>
<th scope="col">PRECIO</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>Lorem ipsum dolor sit amet</td>
<td><span class="d-none d-sm-block">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores, earum
impedit quis excepturi amet nesciunt sunt voluptatem obcaecati voluptatum
eaque nisi eos vero harum. Odio harum exercitationem facere nesciunt alias.
</span></td>
<td>$58745</td>
</tr>
<tr class="">
<td>Lorem ipsum, dolor sit amet consectetur adipisicing</td>
<td><span class="d-none d-sm-block">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus, debitis,
saepe sed laborum dolore ipsam id modi odio itaque enim eaque perferendis
porro corrupti illum ut. Praesentium voluptatibus vero quo.</span></td>
<td>$98574</td>
</tr>
</tbody>
</table>
</div>
</div>
How could it be fixed?
That happens to you because you have not put the d-none in the column, but in a span inside the column.
If you put it in the column definition ( td ) it will work fine for you.
Example: