20

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を使用する必要があります。

4

6 に答える 6

26

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

<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>
于 2012-05-17T05:35:18.883 に答える
12

http://jsfiddle.net/CBQCA/1/でソリューションを見ることができます

また

<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テーブルが展開されていることを確認するためだけに追加しました。削除できます。

于 2012-05-17T05:43:21.303 に答える
2

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

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

私にとっては、Height と Width を 100% に変更するだけではうまくいかず、左、右、上、下を 0 に設定することもできませんが、両方を一緒に使用するとうまくいきます。

于 2015-06-25T20:44:57.030 に答える
0

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

于 2016-04-09T19:45:57.660 に答える
0

使ってみて

<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

于 2015-02-10T15:44:04.963 に答える