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

Question

我有以下HTML表：

 <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> 

这将正确显示并延伸到页面（即容器）。

如果我将d-none d-md-inline到<table>标记中，则表将折叠。 我也尝试了d-md-inline-block和d-md-block但是都没有用。

 <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> 

要点：我希望在MD屏幕或更大屏幕上显示表格，而在SM或XS屏幕（即移动设备）上时希望大桌子消失。 当移动窗口的宽度并碰到SM断点时，它会正确运行，然后消失。 问题在于表格已折叠到其自身上，并且不会在容器宽度上伸展（如合理）。

如何使表格在MD和更大的尺寸上正确显示，但在SM和XS上消失？

在JSFIDDLE查找代码

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

Answer 1

在像这样的table上添加一个wrapper并为wrapper div添加此类d-none d-md-block

<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/