Htmlテーブルセルのサイズ変更の効果

Question

私はjQueryヘルプを使用します。

テーブルセルのサイズを動的に変更できますか？サイズを変更すると、 はそのセルにのみ影響し、残りは同じにしてください。

Answer 1

すぐにテーブルを考える。縦の列はすべて行と同じように整列します。これがテーブルになるのです。一部のブラウザでは、個々の表のセルをハックすることができますが、実際には予測できない可能性があるため、実際には推奨しません。

私がこれにアプローチする方法は、セル内に別の要素がありコンテンツを囲むことです。その後、他の要素のサイズを変更することができます。

Answer 2

新しいサイズに応じて残りのTDのサイズを計算してから、すべてのTDの幅を同時に変更する必要があります。

Answer 3

列または行の1つのセルのサイズを変更すると、必要に応じて行と列がそのセルに対応するようにサイズ変更されます。 edeverettが指摘したように、それはそれをテーブルにするものの一部です。

これを行うには、rowspan=""とcolspan=""の値を変更する必要がありますが、そうした場合は、他のセルを操作してドキュメントから削除/非表示にする必要があります。そうしないと、 、奇妙なレンダリングの問題が発生します。

私は本当にこれを避けるでしょう。セルの内容を区別する場合は、colorを使用してください。フォントサイズとサイズの変更は、誰にも役立つよりも、ディスプレイとUIを台無しにする可能性が高くなります。

Answer 4

Adjusting HTML Table Cell Width using jQueryをご覧ください。この方法では、特定の列のすべての行が特定のサイズになります。

$(document).ready(function() { 





    //Set width of table cells 
    var numberOfColumns = 7; 
    $('.resultGridTable th, .resultGridTable td').each(function (i) { 


     $(this).css('background-color', (['Purple', 'Orange', 'Purple', 'Orange', 'Purple', 'Orange', 'Purple'][i % 7])); 

     if (i % numberOfColumns == 0) { 
      $(this).css('width', '15%'); 
     } 

     if (i % numberOfColumns == 1) { 
      $(this).css('width', '15%'); 
     } 

     if (i % numberOfColumns == 2) { 
      $(this).css('width', '15%'); 
     } 

     if (i % numberOfColumns == 3) { 
      $(this).css('width', '15%'); 
     } 
     if (i % numberOfColumns == 4) { 
      $(this).css('width', '10%'); 
     } 
     if (i % numberOfColumns == 5) { 
      $(this).css('width', '15%'); 
     } 

     if (i % numberOfColumns == 6) { 
      $(this).css('width', '15%'); 
     } 


    } 
); 


} 
);