Bootstrap4表示列を非表示にする

Question

画面サイズに基づいて列を表示/非表示にする必要があります。

例：

• 画面が小さな< 576pxが、私は2列は、画面が中≥768pxがあるとき、私は4列が
• ときの画面を表示したい
• 表示したい余分ですeXtra Large≥1200、私は6列を表示します。

私は3つのテーブルを必要としないので、サイズに基づいて表示または非表示にする列は必要ありません。

JSフィドルで： https://jsfiddle.net/tkcynbjk/

<div class="row"> 
    <div class="col-sm-12"> 
     <table class="table table-striped"> 
      <thead> 
      <tr> 
       <th class="d-none d-table-cell" scope="col">ALWAYS 1</th> 
       <th class="d-none d-table-cell" scope="col">ALWAYS 2</th> 
       <th class="d-none d-table-cell d-md-table-cell" scope="col">MED 1</th> 
       <th class="d-none d-table-cell d-xl-table-cell" scope="col">XL ONLY 1</th> 
       <th class="d-none d-table-cell d-md-table-cell" scope="col">MED 2</th> 
       <th class="d-none d-table-cell d-xl-table-cell" scope="col">XL ONLY 2</th> 
      </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>A</td> 
        <td>B</td> 
        <td>C</td> 
        <td>D</td> 
        <td>E</td> 
        <td>F</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

Answer 1

あなたがd-table-cellクラスを削除したときにそれは動作するはずです。

は、クエリが動作するメディアを見てスニペットフルスクリーンを実行したり、更新フィドルをチェックアウト：https://jsfiddle.net/jkrielaars/tkcynbjk/1/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
      <table class="table table-striped"> 
 
       <thead> 
 
       <tr> 
 
        <th class="" scope="col">ALWAYS 1</th> 
 
        <th class="" scope="col">ALWAYS 2</th> 
 
        <th class="d-none d-md-table-cell" scope="col">MED 1</th> 
 
        <th class="d-none d-xl-table-cell" scope="col">XL ONLY 1</th> 
 
        <th class="d-none d-md-table-cell" scope="col">MED 2</th> 
 
        <th class="d-none d-xl-table-cell" scope="col">XL ONLY 2</th> 
 
       </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr> 
 
         <td>A</td> 
 
         <td>B</td> 
 
         <td class="d-none d-md-table-cell">C</td> 
 
         <td class="d-none d-xl-table-cell">D</td> 
 
         <td class="d-none d-md-table-cell">E</td> 
 
         <td class="d-none d-xl-table-cell">F</td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
    </div>