使用Bootstrap 4 d-md-inline折叠表

Question

I have the following HTML table:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <table class="w-100"> <thead> <tr> <td>Heading 1</td> <td>Heading 2</td> <td>Heading 3</td> </tr> </thead> <tbody> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> </tbody> </table> 

This displays properly and stretches across the page (ie, container).

If I add d-none d-md-inline to the <table> tag, the table collapses. I've also tried d-md-inline-block and d-md-block but neither works.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <table class="w-100 d-none d-md-inline"> <thead> <tr> <td>Heading 1</td> <td>Heading 2</td> <td>Heading 3</td> </tr> </thead> <tbody> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> </tbody> </table> 

THE POINT: I want a table to display when on a MD screen or larger, and I want the big table to disappear when on a SM or XS screen (ie, mobile). It functions correctly when moving the width of the window and when it hits the SM breakpoint, it disappears. The problem is that the table is collapsed onto itself and does not stretch (like justified) across the container width.

How do I get the table to display properly in MD and bigger but disappear on SM and XS?

FIND THE CODE AT JSFIDDLE

https://jsfiddle.net/jallenmorris/m5ct40wd/10/

Answer 1

Add one wrapper on a table like & add this class d-none d-md-block for wrapper div

<div class="d-none d-md-block">
  <table class="table">
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Item 1</td>
        <td>Item 2</td>
        <td>Item 3</td>
      </tr>
    </tbody>
  </table>
</div>

https://jsfiddle.net/lalji1051/sdq03co9/4/