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

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

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

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

タグクラウド

image hover css
フッターイメージ