bootstrap4でのtable-responsiveをレスポンシブにする

bootstrap4でのtable-responsiveをレスポンシブにする

  • 2018-06-16  最終更新日:2018-06-16

最近はCSSフレームワークはBootstrap3からBootstrap4をメインにして作業しております。かなり使いやすいです。ほぼこのフレームワークだけで完結できる仕様になってきました。

さてBootstrap4でtable-responsiveがうまく機能しないということに気がつき試したところ英字の場合だと機能しているなと気がつきました。日本語表示だと7、8列以上なら横スクロールが出てくるのですが5列ぐらいなら無理矢理縦表示になってしまうのでその対処方法をご紹介します。


スポンサーリンク


使い方

基本的にはテーブルの外側にdiv要素にtable-responsiveクラスをつけるだけで機能するのですが日本語だとうまく機能してくれません。table-responsive-sm,table-responsive-md,table-responsive-lg,table-responsive-xlも同様です。

<div class="table-responsive">
  <table class="table">
    <thead>
    <tr>
      <th scope="col">HeadingHeading</th>
      <th scope="col">HeadingHeading</th>
      <th scope="col">HeadingHeading</th>
      <th scope="col">HeadingHeading</th>
      <th scope="col">HeadingHeading</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
       <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
       <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
    </tr>
    </tbody>
  </table>
</div>

上記の状態をスマホで見てみると

bs4tableresponsive

このように表示されてうまくいっています。横にスクロールさせることで全部見ることができます。

今度はこれを日本語にします。

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">番号番号</th>
        <th scope="col">タイトルタイトル</th>
        <th scope="col">タイトルタイトル</th>
        <th scope="col">ヘッダーヘッダー</th>
        <th scope="col">ヘッダーヘッダー</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      </tr>
      <tr>
        <th scope="row">2</th>
         <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
         <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
         <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      </tr>
    </tbody>
  </table>
</div>

日本語にしてみると無理矢理縦表示にされテーブルが圧縮された状態になります。まあ、表示されているので良いのですがなんか縦すぎて読みにくい気がしますね。

bs4tableresponsive

そこでヘッダー要素に折り返さないtext-nowrapクラスをつけます。

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col" class="text-nowrap">番号番号</th>
        <th scope="col" class="text-nowrap">タイトルタイトル</th>
        <th scope="col" class="text-nowrap">タイトルタイトル</th>
        <th scope="col" class="text-nowrap">ヘッダーヘッダー</th>
        <th scope="col" class="text-nowrap">ヘッダーヘッダー</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      </tr>
      <tr>
        <th scope="row">2</th>
         <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
         <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
         <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
      </tr>
    </tbody>
  </table>
</div>

思った通りになりました。

bs4tableresponsive

全体を折り返してほしくない場合はtable要素にtext-nowrapクラスをつければいいだけです。

参考になれば幸いです。


∞Tadashi Suyama∞

image hover css
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
これは楽!iterm2パスワードマネージャー機能

さて今回はiterm2のパスワード管理についてです。そもそもこんな機能がついていること自体知らなかったのでこれ使って楽だなと思ったのでご紹介します。 iterm2の現在時点での最新バージョンは...

30 Mar 2019

アイキャッチ
JavaScriptライブラリデータベースのご紹介

さて今回はJSライブラリーのデータベースをご紹介したいと思います。知っている方が多いかと思いますがライブラリやプラグイン、フレームワークなど探す際には役立つサイトではないでしょうか。 どのJS...

28 Mar 2019

アイキャッチ
Web制作者が8年Chrome使ってきた中でおすすめの拡張機能

最近はEdgeもGoogle Chromeと同じChromiumベースでのブラウザとなりほとんどクローム(Chrome)状態ではあります。FirefoxとSafariぐらいでしょうか。Firef...

17 Mar 2019

アイキャッチ
Bootstrap4でフォーム入力の際にカレンダーから日付入力する方法

最近はメインでのコーディングはBootstrap4に移行しておりますがいろいろと3の時に使えたものが使えなかったりとしております。 DatetimePickerなどもそうですね。私個人的には4に...

18 Feb 2019

アイキャッチ
HomebrewでMySQL8をインストールした時の問題点

さて、今回はお手軽にMySQL8をインストールしたときの問題点などをご紹介します。MacOS用パッケージマネージャーHomebrewを使ってインストール、そしてphpからアクセスしたときの問題点...

13 Feb 2019

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

image hover css
フッターイメージ