HTMLで表形式のデータを折り返す

1行のヘッダーと1行以上の値を表示するデータがあります。現在、私はHTMLテーブルを使用していますが、私は非常に多くのカラムを持っている状況に出くわしました。テーブルは画面の最後から出てきます。または、列名の一部が長すぎる（通常は空白としてアンダースコアを持つ単一の単語です）、列がそれほど多くなくても、テーブルはブラウザウィンドウの最後から離れています。HTMLで表形式のデータを折り返す

私が望むのは、水平方向にスクロールせずにすべてのデータを表示できることです。たとえそれがデータを複数のテーブルに分割することを意味するとしても。

私は現在、埋め込みPerlを使用しています。私が使ったハックアップの解決策は、テーブルあたり8列だけをハードコードし、必要に応じて最初に新しいテーブルを開始することです。しかし理想的には、1つのテーブルにできるだけ多くの列を動的に配置し、必要に応じて新しい行/テーブル/行にラップすることが理想です。

これはHTML/CSS専用にできますか？それとも、各列の幅をどれくらい計算する必要がありますか、それにテーブルあたりの列数をベースにする必要がありますか？私はHTMLテーブルを使用する必要はありませんので、より良い解決策があれば、私はそれを使用するよりも喜んでいます。

出典

2009-04-23 accelerate

どのくらいの大きさが大きすぎるかをどのように知っていますか？ユーザーがブラウザウィンドウのサイズを変更するとどうなりますか？ javascriptの問題のように聞こえるが、perlの問題ではない。 – Tanktalus

table { display: inline; }を列あたり1つの表と組み合わせると、問題が解決するはずです。これを実行し、Webブラウザで出力をロードします。ウィンドウのサイズを変更すると、収まらない列がドロップダウンします。すべてのテーブルに影響を与えたくない場合は、テーブルにclassを使用することをお勧めします。

#!/usr/bin/perl 

use strict; 
use warnings; 

print "<html><head><style>table { display: inline }</style></head><body>"; 
for my $col (1 .. 100) { 
    print "<table><tr><th>$col</th></tr>"; 
    for my $row (1 .. 10) { 
     print "<tr><td>$row</td></tr>"; 
    } 
    print "</table>"; 
} 
print "</body></html>";

出典

2009-04-23 21:38:38

ありがとう！私はそれを試して、これはかなりうまくいくことがわかりました。もう1つの質問があります。与えられた行のすべてのテーブルを（ブラウザまたはdivの）幅全体を占めるようにする方法はありますか？今のところ、複数の行の表がある場合、その行の個々の表の幅に応じて、右端がずらされます。それはそれほど大きな問題ではありませんが、各行に一番右のテーブルをすべて垂直に並べるといいでしょう。 – accelerate

どの行が最後にあるかを事前に知る方法はないので、行を整列させる方法はありません。 –

あなたができることは、あなたが持っている列の数に基づいて各列の幅を設定することです。最適な解はパーセンテージの幅を持つため、ページの幅が変わるとテーブルの幅が変わる可能性があります。

出典

2009-04-23 20:40:51

複数のテーブルを作成する場合は、すべてのデータを表示するためにページを垂直方向にスクロールする必要があると仮定しています。

別の解決策は、divにテーブルをラップし、divに幅を設定し、そのdivのオーバーフローをスクロールすることです。この方法では、ページ全体が水平にスクロールされませんが、テーブルを含むdivにはスクロールバーがあります。

出典

2009-04-23 20:55:59 kbosak

HTMLで表形式のデータを折り返す

答えて

関連する問題