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>