web-dev-qa-db-ja.com

テーブルのオーバーフロー時の水平スクロール

コンテナに基本的なテーブルがあります。テーブルには約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/

htmlcsscss3stylingusability
52
AnchovyLegend

オーバーフローは外側のコンテナにあるはずです。列の最小幅を明示的に設定することもできます。このような：

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

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

99
mayabelle

あなたの質問を大きく誤解しない限り、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;   }

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

6
TreeTree

誰も言及していない解決策は、テーブルに white-space: nowrap を使用し、ラッパーにoverflow-xを追加することです。

（ http://jsfiddle.net/xc7jLuyx/11/ ）

CSS

.wrapper { overflow-x: auto; }
.wrapper table { white-space: nowrap }

HTML

<div class="wrapper">
    <table></table>
</div>

これは、複数行の行が必要ない場合の理想的なシナリオです。行を追加するには、<br/>を使用する必要があります。

1
The.Bear
   .search-table-outter {border:2px solid red; overflow-x:scroll;}
   .search-table{table-layout: fixed; margin:40px auto 0px auto;   }
   .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;}

Divでスクロールを提供する必要があります。

0
surbhi bakshi