web-dev-qa-db-ja.com

Bootstrap 3を使用して、テーブルの列を非表示にするにはどうすればよいですか？

レスポンシブデザインの列を非表示にしようとしていますcol-xsおよびcol-sm。私は最初にhidden-xs/hidden-smクラスが、これは機能しませんでした。また、visible-desktopここで述べたとおり： Twitter Bootstrap Responsive-テーブル列のみをデスクトップに表示する

それもうまくいきませんでした。これを行う最良の方法は何ですか？むしろ、2つの別々のテーブルを作成してから、どちらか一方を非表示にしません。

試したコードは現在動作していません：

<table>
    <thead>
        <th>Show All the time</th>
        <th class="hidden-xs hidden-sm">Hide in XS and SM</th>
    </thead>
    <tbody>
        <tr>
            <td>Show All the time</td>
            <td class="hidden-xs hidden-sm">Hide in XS and SM</td>
        </tr>
    </tbody>
</table>
htmlcsstwitter-bootstrapresponsive-designhtml-table
28
daveomcd

コードは問題なく動作するはずです。 Bootstrapは、thおよびtdのレスポンシブユーティリティクラスの非表示/表示をサポートしています https://github.com/twbs/bootstrap/blob/ master/less/mixins.less＃L504 ：

// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
  display: block !important;
  tr& { display: table-row !important; }
  th&,
  td& { display: table-cell !important; }
}

.responsive-invisibility() {
  display: none !important;
  tr& { display: none !important; }
  th&,
  td& { display: none !important; }
}

コードはこのjsFiddleで動作します： http://jsfiddle.net/A4fQP/

16
Ross Allen

受け入れられた回答には多くの賛成票があるため、以前はhidden-xs/hidden-smが機能していたようですが、領域のサイズを変更しているときはフィドルの例は機能しません。私にとってうまくいくのは、visible-md/visible-lgを使用した反対のロジックです。文書によるとBootstrapはまだ hidden-xs/hidden-sm をサポートする必要があるため、理由はわかりません。

作業フィドル： http://jsfiddle.net/h1ep8b4f/

<table>
    <thead>
        <th>Show All the time</th>
        <th class="visible-md visible-lg">Hide in XS and SM</th>
    </thead>
    <tbody>
        <tr>
            <td>Show All the time</td>
            <td class="visible-md visible-lg">Hide in XS and SM</td>
        </tr>
    </tbody>
</table>
16
Ogglas

最近、同様の問題に遭遇し、画面サイズに応じてテーブルの表示方法が異なります。私にとってのタスクは、大きな画面で1つの列を非表示にし、他の3つの列を非表示にしてモバイルデバイスに表示することでした（「1」列は「3」列のデータの合計です。上記の応答のように、メディアクエリを使用しましたが、ブートストラップの事前に作成されたビューはすべて破棄され、関連するthおよびtdタグにクラスを追加しました。

次のようになります。

.full_view {
width: 50px;
  @media(max-width: 768px){
    display: none;
  }
}

.small_view {
  width: 50px;
  @media(min-width: 768px){
    display: none;
  }
}
2
ffej