TwitterBootstrapでのレスポンシブテーブル処理

次のページのように、テーブルの幅がスパンの幅を超える場合：http：//jsfiddle.net/rcHdC/

テーブルの内容がの外にあることがわかりますspan。

このケースに対応するための最良の方法は何でしょうか？

Bootstrap 3には、すぐに使用できるレスポンシブテーブルがあります。やったー！:)

ここで確認できます：https：//getbootstrap.com/docs/3.3/css/#tables-responsive

<div class="table-responsive">テーブルの周囲を追加すると、準備が整います。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

すべてのレイアウトで機能させるには、次のようにします。

.table-responsive
{
    overflow-x: auto;
}

利用可能なオプションの1つはfooTableです。レスポンシブウェブサイトでうまく機能し、複数のブレークポイントを設定できます... fooTableリンク

レスポンシブテーブルを扱うときにできることはたくさんあります。

私は個人的にクリス・コイエによるこのアプローチが好きです：

• http://css-tricks.com/responsive-data-tables/

あなたはここで他の多くの選択肢を見つけることができます：

• http://css-tricks.com/responsive-data-table-roundup/
• http://bradfrost.github.io/this-is-responsive/patterns.html#tables

Bootstrapを活用して何かをすばやく取得できる場合は、クラス名「.hidden-phone」と「.hidden-tablet」を使用して一部の行を非表示にすることができますが、多くの場合、このアプローチが最適な場合があります。詳細（「レスポンシブユーティリティクラス」を参照）：

• http://twitter.github.io/bootstrap/scaffolding.html#responsive

Bootstrap 3以下を使用している場合は、ファイルを更新することで、レスポンシブテーブルをすべての解像度に適用できます。

tables.less

またはこの部分を上書きします：

@media (max-width: @screen-xs) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid @table-border-color;

    // Tighten up spacing and give a background color
    > .table {
      margin-bottom: 0;
      background-color: #fff;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

と：

@media (max-width: @screen-lg) {
  .table-responsive {
    width: 100%;
...

最初の行の@ screen-XX値をどのように変更したかに注意してください。

すべてのテーブルをレスポンシブにするのはそれほど良くないように聞こえるかもしれませんが、大きなテーブル（多数の列）でLGまでこれを有効にすると非常に便利であることがわかりました。

それが誰かを助けることを願っています。