web-dev-qa-db-ja.com

水平スクロールバーをHTMLテーブルに追加

HTMLテーブルに水平スクロールバーを追加する方法はありますか？実際には、テーブルがどのように成長するかに応じて、垂直と水平の両方にスクロール可能である必要がありますが、スクロールバーを表示することはできません。

htmlcsshtml-tablescrollbar
101
Tsundoku

CSS overflowプロパティを試しましたか？

overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

UPDATE
他のユーザーが指摘しているように、これでは十分ではありませんスクロールバーを追加します。
以下のコメントと回答をご覧ください。

65
pasine

まず、テーブルのdisplay: blockを作成します

次に、overflow-x:をautoに設定します。

table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

素敵できれい。余分なフォーマットはありません。

テーブルキャプションをスクロールするより複雑な例 私のウェブサイトのページから。

162
Serge Stroobandt

テーブルをDIVでラップし、次のスタイルで設定します。

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}
36
Colin M

これには、CSS属性「 overflow 」を使用します。

短い要約：

overflow: visible|hidden|scroll|auto|initial|inherit;

例えば.

table {
    display: block;
    overflow: scroll;
}
16
Roger Willcocks

私は同じ問題に直面していました。 Chrome v31でのみテストされている次のソリューションを発見しました。

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}
8
Josh

上記の解決策のいずれも機能しませんでした。しかし、ハックが見つかりました：

body {
  background-color: #ccc;
}

.container {
  width: 300px;
  background-color: white;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

/* try removing the "hack" below to see how the table overflows the .body */
.hack1 {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.hack2 {
  display: table-cell;
  overflow-x: auto;
  width: 100%;
}
<div class="container">

  <div class="hack1">
    <div class="hack2">

      <table>
        <tr>
          <td>table or other arbitrary content</td>
          <td>that will cause your page to stretch</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
      </table>

    </div>
  </div>

</div>
7
mpen

これは Serge Stroobandt's answerの改善であり、完全に機能します。列の数が少ない場合、テーブルがページ幅全体を埋めないという問題を解決します。

<style> 
 .table_wrapper{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
</style>

<div class="table_wrapper">
<table>
...
</table>
</div>
4
ochomoswill

@Serge Stroobandtによって提案されたソリューションで大成功を収めましたが、@ Shevyがセルで抱えていた問題が発生し、テーブルの幅いっぱいに表示されませんでした。 tbodyにいくつかのスタイルを追加することで、これを修正できました。

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

table tbody {
  display: table;
  width: 100%;
}

これは、Mac上のFirefox、Chrome、およびSafariで機能しました。

3
Mary7678

以前のソリューションとそのコメント に基づいてこの答えを見つけ出し、自分自身の調整を追加しました。これはレスポンシブテーブルで機能します。

table {
  display: inline-block;
  overflow-x: auto;
  white-space: nowrap;
  // make fixed table width effected by overflow-x
  max-width: 100%;
  // hide all borders that make rows not filled with the table width
  border: 0;
}
// add missing borders
table td {
  border: 1px solid;
}
2
George Wu

テーブルの「100％以上の幅」により、実際に機能しました。

.table-wrap {
    width: 100%;
    overflow: auto;
}

table {
    table-layout: fixed;
    width: 200%;
}
1
Peps