83

コンテナに基本的なテーブルがあります。テーブルには約 25 の列があります。テーブルのオーバーフローに水平スクロールバーを追加しようとしていますが、本当に苦労しています。

現在起こっていることは、セルの高さを自動的に調整し、固定のテーブル幅を維持することによって、テーブル セルがセルの内容に対応していることです。

これを修正する方法について、私の方法が機能しない理由についての提案に感謝します。

よろしくお願いします！

CSS

.search-table-outter {margin-bottom:30px; }
.search-table{table-layout: fixed; margin:40px auto 0px auto;  overflow-x:scroll; }
.search-table, td, th{border-collapse:collapse; border:1px solid #777;}
th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
td{padding:5px 10px; height:35px;}
tr:nth-child(even)  {background: #f5f5f5;}
tr:nth-child(odd)   {background: #FFF;}

HTML

<div class="search-table-outter wrapper">
    <table class="search-table inner">
        <tr>
            <th>Col1</th>
            <th>col2</th>
            <th>col3</th>
            <th>col4</th>
            <th>col5</th>
            <th>col5</th>
        </tr>
        <?php echo $rows; ?>
    </table>
</div>

JSフィドル（注：可能であれば、水平スクロールバーを赤い枠のコンテナに入れたい）： http://jsfiddle.net/ZXnqM/3/

4

6 に答える 6

139

私はあなたoverflowが外側の容器にあるべきだと思います。列の最小幅を明示的に設定することもできます。このような：

.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }

フィドル: http://jsfiddle.net/5WsEt/

于 2013-11-05T16:50:48.283 に答える
54

tableをラップできない、またはラップしたくないdiv(たとえば、HTML が Markdown から生成された場合) が、スクロールバーが必要な場合の解決策:

table {
  display: block;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
}
<table>
  <tr>
    <td>Especially on mobile, a table can easily become wider than the viewport.</td>
    <td>Using the right CSS, you can get scrollbars on the table without wrapping it.</td>
  </tr>
</table>

<table>
  <tr>
    <td>A centered table.</td>
  </tr>
</table>

説明:display: block;スクロールバーを持つことを可能にします。デフォルトでは (テーブルとは異なり)、ブロックは親要素の全幅にまたがります。これは を使用して防ぐことがmax-width: fit-content;できます。これにより、 を使用してコンテンツの少ないテーブルを水平方向に中央揃えにすることができますmargin: 0 auto;。white-space: nowrap;オプションです (ただし、このデモンストレーションには役立ちます)。

于 2020-06-18T13:53:19.380 に答える
7

私があなたの質問をひどく誤解していない限り、 から に移動overflow-x:scrollし.search-tableてください.search-table-outter。

http://jsfiddle.net/ZXnqM/4/

.search-table-outter {border:2px solid red; overflow-x:scroll;}
.search-table{table-layout: fixed; margin:40px auto 0px auto;   }

私の知る限り、スクロールバーをテーブル自体に与えることはできません。

于 2013-11-05T16:49:15.927 に答える
-4

モバイル向けのレスポンシブ サイトでは、全体を相対 div に絶対配置する必要があります。しかも高さ固定。関連性に設定されたメディア クエリ。

@media only screen and (max-width: 480px){
  .scroll-wrapper{
    position:absolute;
    overflow-x:scroll;
  }

于 2016-02-24T14:02:29.307 に答える