Bootstrap 4: avoid breaking table when hiding more than one cell

Question

I'm having a table like this:

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col" class="d-none d-sm-block">First</th>
      <th scope="col" class="d-none d-sm-block">Last</th>
      <th scope="col" class="d-none d-sm-block">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
  </table>

and when using d-none d-sm-block (hiding elements on small screen), my whole table just breaks and the three cells I'm trying to hide just stack over each other.

Am I doing something wrong, or is this a bug in BS4?

Here's a pen to view it:

https://codepen.io/anon/pen/RBxjYo

Answer 1

The reason that you are having the issue is because you setting the display to block instead of table-cell.

class="d-none d-sm-block"

to

class="d-none d-sm-table-cell"

and it will display correctly. This will show it for everything small or larger. If you want it to be hidden for small and showed for everything bigger than that then it needs to be this instead

class="d-none d-md-table-cell"