7

私は Web プログラミングに比較的慣れていないので、ここで明らかな間違いを犯している可能性があります。

rows[i].style.display = 'none' のような JavaScript からテーブル内の行を非表示にしようとすると、テーブル レイアウトが完全に壊れてしまいます。もともと、セルのコンテンツが折り返され、テーブルの幅が縮小されていました。次に、table タグに style="table-layout: fixed" を追加し、各 td に style="white-space:nowrap" を追加しました。これにより行の折り返しは停止しましたが、それでもコンテンツは行に整列されませんでした。スペースがあり、列幅が行ごとに異なる場合、セルは左に移動し始めました。次に、th 要素と td 要素のそれぞれに固定幅を追加し、テーブルを含む div にも追加しました。それでも問題は残りました。

私の現在のHTMLは次のようなものです。 

<div style="width: 300px">
  <table id="errorTable" width="100%" cellpadding="5" cellspacing="2" style="table-layout: fixed"> 
    <tr id="HeaderRow">
      <th style="width: 100px;">Header 1</th>
      <th style="width: 50px;">Header 2</th>
      <th style="width: 150px;">Header 3</th>
    </tr>
    <tr id="DetailRow1">                                        
      <td style="white-space:nowrap; width: 100px;">Data 1_1 in Row 1</td>
      <td style="white-space:nowrap; width: 50px;">Data 1_2  in Row 1</td>
      <td style="white-space:nowrap; width: 150px;">Data 1_3 in Row 1</td>
    </tr>
    <tr id="DetailRow2">                                        
      <td style="white-space:nowrap; width: 100px;">Data 2</td>
      <td style="white-space:nowrap; width: 50px;">Data 2</td>
      <td style="white-space:nowrap; width: 150px;">Data 2</td>
    </tr>
    <tr id="DetailRow3">                                        
      <td style="white-space:nowrap; width: 100px;">Data 3_1</td>
      <td style="white-space:nowrap; width: 50px;">Data 3_2</td>
      <td style="white-space:nowrap; width: 150px;">Data 3_3</td>
    </tr>
  </table>
</div>

テーブルが初めて表示されるとき、列はそれぞれ幅 100、50、および 150 ピクセルで適切に配置されます。しかし、たとえば 2 番目の行が非表示になっている場合、表示されている残りの 2 つの行のセル幅は 100、50、150 に固定されなくなり、データは垂直方向に整列されなくなります。表全体の幅は 300 ピクセルのままであることに注意してください。各セルのデータは、使用可能なスペースがあり、追加のスペースが最後の列 (この場合は 3 列目) によって使用される場合、左に移動します。

次の投稿は役に立ちましたが、ご覧のとおり、私の問題を完全には解決しませんでした。 全体の幅のサイズを変更せずに表の行を非表示にする

どんな助けでも大歓迎です。

4

5 に答える 5

0

私も同じ問題を抱えています。各テーブルの内側にスパンを投げて、幅を強制できるかどうかを確認しましたが、うまくいくようです。でも醜いです。

于 2012-09-28T16:10:44.713 に答える
0

列の幅は常に固定してください。それはあなたの問題を解決しますか？

.myTable td{ width:33% !important; }

理想的には、ヘッダーとボディ セクションも と を使用して囲む必要がありますthead。tbody

<table>
  <thead>
    <tr> ... </tr>
  </thead>

  <tbody> 
    .  
    .      
    .
  </tbody>
</table>
于 2012-05-04T05:52:40.540 に答える