html - 使用 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 断点时消失。问题是表格折叠到自身上并且不会在容器宽度上拉伸(stretch)(如对齐)。

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

在 JSFIDDLE 中查找代码

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

Answer 1

加一个wrapper在 table 上喜欢并添加这个类(class) d-none d-md-block对于 wrapper格

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