web-dev-qa-db-ja.com

テーブルをウィンドウ全体に表示する

HTMLテーブルをブラウザウィンドウ全体を水平および垂直に埋めるにはどうすればよいですか？

ページは単にウィンドウ全体を埋めるタイトルとスコアです。 （固定フォントサイズは別の問題であることを認識しています。）

<table style="width: 100%; height: 100%;">
    <tr style="height: 25%; font-size: 180px;">
        <td>Region</td>
    </tr>
    <tr style="height: 75%; font-size: 540px;">
        <td>100.00%</td>
    </tr>
</table>

上記のコードを使用すると、テーブルの幅は正しくなりますが、2行のテキストに合わせて高さが縮小します。

このページを表示するには、Internet Explorer 8または9を使用せざるを得ないでしょう。

htmlcssinternet-explorerstylesheet
16
Hand-E-Food

このような位置を使用して、親コンテナ全体に要素を引き伸ばすことができます。

<table style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
    <tr style="height: 25%; font-size: 180px;">
        <td>Region</td>
    </tr>
    <tr style="height: 75%; font-size: 540px;">
        <td>100.00%</td>
    </tr>
</table>
19
Todd Baur

あなたは http://jsfiddle.net/CBQCA/1/ で解決策を見ることができます

OR

<table style="height:100%;width:100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0;border:1px solid">
     <tr style="height: 25%;">
        <td>Region</td>
    </tr>
    <tr style="height: 75%;">
        <td>100.00%</td>
    </tr>
</table>​

列が展開されていることを示すために、フォントサイズを削除しました。追加した border:1px solid単にテーブルが展開されていることを確認するためです。削除できます。

10
Raab

以下の行は、テーブルのスクロールバーの問題を修正するのに役立ちました。この問題は、ページ内の2つのスクロールバーが厄介でした。テーブルに適用したときのスタイルの下は、私にとってはうまくいきました。
<table Style="position: absolute; height: 100%; width: 100%";/>

1
Vishwas S L

使用してみてください

<html style="height: 100%;">
    <body style="height: 100%;">
        <table style="height: 100%;">
        ...

table要素のすべての親を、使用可能な垂直方向のスペースに拡張するために（これにより、absoluteポジショニングを使用する必要がなくなります）。

Firefox 28、IE 11およびChromium 34で動作します（したがって、おそらくGoogle Chromeも同様）

ソース： http://www.dailycoding.com/posts/howtoset100tableheightinhtml.aspx

0
Janaka Bandara

それは、もちろん、実際のページの高さがないためです。ページのコンテンツは水平ではなく垂直にスクロールし、幅は制限されますが高さは制限されないことに注意してください。選択された答えは、テーブルが可視領域を占有し、何があってもそこにとどまるようにすることでした（絶対配置）。

0
DanjahSoft Programmer

これは私にとってはうまくいきます：

<style type="text/css">
#table {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
}
</style>

私にとっては、HeightとWidthを100％に変更するだけでは効果がありません。また、left、right、top、bottomを0に設定することもできませんが、両方を一緒に使用するとうまくいきます。

0
ColorCodin