2
各行がセル内のテキスト内容に基づいて最大サイズの均一なセルを保持するdivを使用して表を作成したいとします。最後に、AJAXを使用して文字列の配列をロードします。私は、ブラウザがそれらを先にレンダリングするならば、最大のセル幅が最も長い文字列のために何であるかを決定し、その情報を使って、幅が最大になるようにします。jQueryを使用して表の均一幅セルの数を最大化
私は最大のセルのサイズを計算する際に問題に遭遇しました。なぜなら、それらが動的に生成され、 'width'関数が常にレンダリングされていないので、それらをテーブルに挿入するからです。 例
<style type="text/css">
.dtable {display: table;}
.drow {display: table-row;}
.dcell {
font-family:Consolas,'Lucida Console','DejaVu Sans Mono',monospace;
display: table-cell; padding: 10px; outline:black solid thin; background-color: yellow;
}
.dcell > * {vertical-align: middle; }
</style>
<script type="text/javascript">
$(document).ready(function() {
var w = $('#qcell2').width();
alert(w);
$('#qcell4').width(w);
$('#qcell5').width(w);
$('#qcell6').width(w);
}); // end document-ready callback
</script>
</head>
<body>
<div id="qblock" class="dtable" style="margin-left:10%; margin-right:10%;">
<div id="qrow" class="drow" style="">
<div id="qcell1" class="dcell">text</div>
<div id="qcell2" class="dcell">a lot more text</div>
<div id="qcell3" class="dcell">some text</div>
</div>
</div>
<div id="qblock" class="dtable" style="margin-left:10%; margin-right:10%;">
<div id="qrow" class="drow">
<div id="qcell4" class="dcell">text</div>
<div id="qcell5" class="dcell">a lot more text</div>
<div id="qcell6" class="dcell">some text</div>
</div>
</div>
</body>
</html>
I made a screenshot available here
お知らせ私はブラウザが一つのテーブルに三つのセルをレンダリングしてみましょう、となったのは：
私は概念的にやりたいものの例はそうのようなものです＃qcell2が最長であることを視覚的に見ることができます。＃qcell2から幅を決めるために、すべての幅を設定する2番目のテーブルを描画します。私はブラウザが最初にすべてのセルをレンダリングさせることができるので、ブラウザがセルを圧縮しようとしていないようにテーブルが十分に広いので、すべてのセルの快適な最大幅を取得する必要があります。その情報を使用して、行ごとにいくつのセルを計算すれば、それらがすべて均一なサイズになり、テーブルに使用できるすべての不動産が使用されるようにすることができます。
また、究極的には、単純な文字列の配列から始めて、テーブルの中に快適に置くことができるように、多くの文字列のセルを含むテーブルを作成します。最も広い文字列を保持するセル。