web-dev-qa-db-ja.com

テーブルの最大高さを設定する

いくつかのテーブルがあるページをデザインしようとしています。テーブルのスタイリングは、本来あるべきよりもずっと痛いようです。

問題は次のとおりです。テーブルの高さを固定し、下部に空白（コンテンツが少なすぎる場合）または垂直スクロールバー（多すぎる場合）を表示する必要があります。これに加えて、テーブルにはスクロールしないヘッダーがあります。

私の知る限り、スクロールしないtheadがテーブルのデフォルトの動作です。また、ストレッチtfootは、空白を埋める目的に役立ちます。悲しいことに、テーブルの高さに課すことができるすべての制約が元気に無視されているようです。私が試してみました

table {
    height: 600px;
    overflow: scroll;
}

私はmax-height。テーブルを絶対に配置し、上部と下部の両方の座標を指定しようとしました。 Firebugで高さを手動で編集して、CSSの特異性に問題があるかどうかを確認しようとしました。 tbodyにも高さを設定しようとしました。事実は、テーブルは常にその内容と正確に同じ高さのまま、私の努力に関係なく。

もちろん、div構造を持つテーブルを偽造することもできますが、実際にはisテーブルであり、divを使用すると、一部の列が適切に配置されない問題が発生する可能性があります。

テーブルに高さを与えるにはどうすればよいですか？

htmlcsscss-tables
43
Andrea

[〜＃〜] note [〜＃〜]この答えは現在間違っています 。後でまた戻ってくるかもしれません。

他の人が指摘したように、 テーブルの高さを設定することはできません 表示をblockに設定しない限り、スクロールヘッダーが表示されます。探しているのは、heightのみにtbodyとdisplay:blockを設定することです。

<table style="border: 1px solid red">
    <thead>
        <tr>
            <td>Header stays put, no scrolling</td>
        </tr>
    </thead>
    <tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
        <tr>
            <td>cell 1/1</td>
            <td>cell 1/2</td>
        </tr>
        <tr>
            <td>cell 2/1</td>
            <td>cell 2/2</td>
        </tr>
        <tr>
            <td>cell 3/1</td>
            <td>cell 3/2</td>
        </tr>
    </tbody>
</table>

フィドル です。

27
Dan Dascalescu

追加 display:block;をテーブルのcssに。 （言い換えると、テーブルではなくブロック要素のように動作するようにテーブルに指示します。）

ここを中心に

9
Scott

これを行うには、次のcssを使用します。

.scroll-thead{
    width: 100%;
    display: inline-table;
}

.scroll-tbody-y
{
    display: block;
    overflow-y: scroll;
}

.table-body{
    height: /*fix height here*/;
}

以下はHTMLです。

<table>
 <thead class="scroll-thead">
          <tr> 
           <th>Key</th>
           <th>Value</th>
          </tr> 
         </thead>
         <tbody class="scroll-tbody-y table-body">
          <tr> 
          <td>Blah</td> 
          <td>Blah</td> 
          </tr> 
</tbody>
</table>

JSFiddle

4
Sibi John

私は同僚に今日これをどうやってやるのか尋ねましたが、これが私が思いついたものです。私はそれを愛していませんが、それはjsなしでそれを行う方法であり、ヘッダーを尊重します。ただし、主な欠点は、真のテーブルヘッダーがなくなったためにセマンティクスが失われることです。

基本的に、テーブル内にテーブルをラップし、max-heightを指定してdivをスクロールコンテナとして使用します。偽のヘッダー行を「折りたたむ」親テーブルでテーブルをラップしているため、テーブルがそれらを尊重しているように見えますが、実際には子テーブルの行数は同じです。

スクロールバーがスペースを占有することによる小さな問題の1つは、子テーブルの列幅が正確に一致しないことです。

ライブデモ

マークアップ

<table class="table-container">
    <tbody>
        <tr>
            <td>header col 1</td>
            <td>header col 2</td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="scroll-container">
                    <table>
                        <tr>
                            <td>entry1</td>
                            <td>entry1</td>
                        </tr>
                       ........ all your entries
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

[〜＃〜] css [〜＃〜]

.table-container {
    border:1px solid #ccc;
    border-radius: 3px;
    width:50%;
}
.table-container table {
    width: 100%;
}
.scroll-container{
    max-height: 150px;
    overflow-y: scroll;
}
3
Loktar

テーブルでは、最小のテーブルセルの高さまたは行の高さにはcss height: 代わりに min-height:

そして

Javascriptを使用してテーブル内のすべてのセルまたは行の最大高さを制限する場合：

このスクリプトは、水平オーバーフローテーブルに適しています。

このスクリプトは、行がmax-height（160px）に縮小するまで、テーブル幅を毎回300px（最大4000px）増やします。また、必要に応じて数値を編集することもできます。

var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
    while (row.offsetHeight > 160 && j < 4000) {
        j += 300;
        table.style.width = j + 'px';
    }
}

出典： HTMLテーブルソリューションテーブル幅の増加による行またはセルの最大高さ制限、Javascript

0
Mr. Rick

スクロールする必要があるコンテンツの周囲に最大高さと最小高のdivを使用します。

<tr>
    <td>
        <div>content</div>
    </td>
</tr>

td div{
    max-height:20px;
}

https://jsfiddle.net/ethanabrace/4w0ksczr/

0
Beefjeff

this 質問に非常に似ているようです。そこから、これはトリックを行うはずです：

table {
  display: block; /* important */
  height: 600px;
  overflow-y: scroll;
}
0
Wesley