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