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


142

水平スクロールバーをHTMLテーブルに追加する方法はありますか?テーブルがどのように拡大するかに応じて、垂直方向と水平方向の両方にスクロールできるようにする必要がありますが、どちらのスクロールバーも表示できません。


3
...テーブル全体をdivに入れることを考えましたか?...次にdivにスクロールを追加しますか?
ベクトル

3
たぶん、どの回答が受け入れられた回答になるかを変更する時間ですか
Serge Stroobandt 2017

回答:


82

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

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

更新
他のユーザーが指摘しているように、これはスクロールバーを追加するには不十分です。
下記のコメントと回答を参照し、賛成票を投じてください。


15
私自身の試みやインターネットで読んだ他のすべてによると、これは単に機能しません。確かにラッパー要素はオーバーフローできますが、テーブル自体はオーバーフローできません。
bloudermilk 2014

21
@bloudermilk追加すればできdisplay: blockます。
Cees Timmerman

244

まず、display: blockテーブルを作ります

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

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

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

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


3
これは私にとってChromeで機能しますが、すべてをまとめて潰した後でのみです。white-space: nowrap;スクロールバーをすぐに確認できます。
Cees Timmerman、2016

28
実際に試してみました。唯一の問題は、テーブルのセルがテーブルの幅いっぱいに表示されなくなったことです。
Shevy

4
他の人が言ったように、これは適切に機能しません:テーブルの行がテーブルの幅を埋めません。
collimarco 2017

1
@SergeStroobandtいいえ、私の場合white-space: nowrap;は問題を解決しません(Firefoxでテスト済み)。行を拡張するのに十分なコンテンツ(テキスト)がない場合、行の幅はテーブルの幅よりも小さくなります。
collimarco 2017

3
@collimarco注インラインブロックオプションにはmax-width:100%を使用する必要がありました。
dogoncouch 2018

40

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

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

8
overflow:autoここは必要ないようです。とにかく、幅を設定せずにこれを達成することを知っていますか?それは常にhtmlの解決策のようです-幅または高さをハードコードしますが、レイアウトエンジンを持つという点を打ち負かしているようです!
JonnyRaa 2015年


11

私は@Serge Stroobandtによって提案された解決策で成功しましたが、@ Shevyがセルの全幅を埋めていないという問題に遭遇しました。これにいくつかのスタイルを追加することで修正できましたtbody

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

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

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


10

上記の解決策のいずれも機能しませんでした。しかし、私はハックを見つけました:

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>


上記のいずれも私にとってはうまくいきませんでしたが、これはうまくいきました。いいね、ありがとう。
ガブリエル

@Gábrielよろしくお願いします。私はFirefoxで今再びそれを試してみましたが、それは正しくレンダリングされていないようです:-( i.imgur.com/BcjSaCV.png Chromeはまだ見え良い。
MPEN

1
奇妙な; 私はそれをFirefoxで正確に使用し、そこで機能しました-この正確な設定ではありませんが。10 x 10 pxのdivで構成された大きなグリッドをレンダリングし、境界線を折りたたみ、最大幅+オーバーフローx:autoをキーにしたかったのです。これらを配置すると、すべてが完璧に見えました。また、<table>はまったく使用せず、divのみを使用して、display、table、table-row、table-cellを表示しています。
ガブリエル

10

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

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

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

2
white-space: nowrap;オプションのようです。
Mike


2

私は以前の解決策に基づいてこの答えを理解し、それはコメントであり、私の独自の調整を追加しました。これは私にとってレスポンシブテーブルで機能します。

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;
}

@Saeed html構造のようなものですか?
ジョージ

私の悪いこと、
つまり、

このバージョンがより明確になることを願っています。
ジョージ

1

テーブルの「100%を超える幅」は、私にとって本当に効果的でした。

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

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


-2
//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>

//Css to make Horizontal Dropdown

<style>

    .search-table{table-layout: auto; margin:40px auto 0px auto; }
    .search-table, td, th {
        border-collapse: collapse;
    }
th{padding:20px 7px; font-size:15px; color:#444;}
td{padding:5px 10px; height:35px;}
    .search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }


</style>

インデントとサンプルデータは、何かをデモする場合に役立ちます。また、「ドロップダウン」ではなく「スクロールバー」という意味ですか?
Cees Timmerman
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.