0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Bootstrap] table の 列 を非表示にする(レスポンシブ対応)

Posted at

##環境設定
Ruby 2.6.6
Rails 6.1.2.1
slim
Bootstrap5

##躓いたところ
・Bootstrap で table 作成時に境界線が直線にならない(画像内First Columnの下)
[bp ≧ 768px(md)]
スクリーンショット 2021-04-14 22.46.28.png
[bp < 768px ]
スクリーンショット 2021-04-14 22.55.01.png

*.html.slim
.container
  .row
    .col-12
      table.table
        thead
          tr
            th scope="col"
              p #
            th.d-none.d-md-block scope="col"
              p First
            th scope="col"
              p Last
            th scope="col"
              p Handle
        tbody
          tr
            th scope="row"  
              p 1
            td.d-none.d-md-block
              p Mark
            td
              p a
            td
              p b
          tr
            th scope="row"  
              p 2
            td.d-none.d-md-block
              p Mark
            td
              p c
            td
              p d

##解消方法

*.html.slim
- td.d-none.d-md-block
+ td.d-none.d-md-table-cell

##背景・原因など
・任意の画面幅の大きさの時に、テーブルセル(tr,td)を表示する場合は、

slim
tr.d-[ブレイクポイント(md/lgなど)]-table-cell"

・"bootstrap table 列 非表示" でググるも期待した結果を得られず..
-> "bootstrap table column hide"で解決策を見つけた。

・あとで"bootstrap table 列 非表示 レスポンシブ"で検索したら出てきた。言葉足らずでした...

##参考URL
https://getbootstrap.jp/docs/5.0/utilities/display/#notation

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?