7

動的に作成された任意の数の列を含むページの場合、100% のテーブルが必要です。各列には非常に長い単語を含めることができるため、すべてが 1 ページに収まらない場合があります。これを修正するためtable-layout: fixedに、テーブルのすべての列がページに表示されるようにしました。問題は、各列の幅を動的にして、列に短い単語がある場合は長い単語の幅よりも短くする必要があることです。

例: jsfiddle。

表 1 には常にすべての列が表示されますが、ページの幅が十分に広い場合、他の列に空きスペースがある場合でも単語が壊れます。

表 2 は、ページが列よりも広い場合は正常に機能しますが、ウィンドウが小さい場合、最初の列が他の列を画面から押し出したり、他のオブジェクトに押し付けたりします。

それをすべて取得する方法はありますか？すべての列と、収まる必要があるよりも幅が広くない列を常に含むテーブルですか? テーブルをオーバーフローさせるのではなく、必要に応じて言葉を壊したい.

js/jquery ソリューションを受け入れることもできますが、css で可能であればそれが望ましいです。

編集：

小さなテーブル: 注: asasdasdasdasdasdasdasdasdasdasdasd は短縮された1 つの単語です。テーブルはこれより大きくできないためです。

+--------------------+----------+---------+
|asasdasdasdasdasdasd|qweqweqweq|zxczxczxc|
|asdasdasdasdasd     |          |         |
+--------------------+----------+---------+

大きなテーブル: 注: すべての列が同じサイズではありません。好ましくは、空のスペースが均等に分散されて増加します。

+--------------------------------------+-------------+------------+
|asasdasdasdasdasdasdasdasdasdasdasd   |qweqweqweq   |zxczxczxc   |
+--------------------------------------+-------------+------------+
4

2 に答える 2

1

これが出発点になる可能性があることを理解している場合：

var tds;

$("table").each(function() {

   tds = $("td");

    for(var x = 0; x < tds.length; x++){
        tds.eq(x).css('max-width', '100px');
    }

});
于 2012-05-31T13:15:07.383 に答える
0

まず、「table-layout:fixed」プロパティを削除します。

次のコードを試してください。これはあなたのケースで完全に機能するはずです:

$(document).ready(function(){

 $("table").find('tr').children('td').each(function () {
     var wdth = $(this).html().length + 10;
     $(this).css({ 'padding-right': '10px' }, { 'width': wdth + 'px' });
  });
});
于 2012-06-27T06:13:32.493 に答える