ホームページ >ウェブフロントエンド >htmlチュートリアル >上のテーブルと下のテーブルの列数が同じです。列を揃える方法_html/css_WEB-ITnose

上のテーブルと下のテーブルの列数が同じです。列を揃える方法_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-06-24 12:15:011920ブラウズ

上の表には各列がタイトルとして表示され、下の表には対応するデータが表示されます。


ディスカッションへの返信(解決策)

列数が同じであれば、整列していませんか?

列数が同じであれば、整列していませんか?
列数は同じですが、整列はありません

あ、以下の重要な点を書き忘れていました テーブルに余分なドロップダウン スクロール バーがある場合、整列することはできません

に入れることはできません。テーブルですか?

セルの幅を指定します (パーセンテージではないことに注意してください)

セルの幅を指定します (パーセンテージではないことに注意してください)
使用されるパーセンテージです。さまざまなブラウザで適切に表示されるようにしたいです。サイズ

ああ、重要なことは、下の表に余分なドロップダウン スクロール バーがある場合、整列されないということです
同じ表内に置くことはできません。

5 階の回答からの引用:
セルの幅を指定します (パーセンテージではないことに注意してください)

使用されるパーセンテージです。異なるサイズのブラウザで見栄えを良くしたい場合は、スクロール バーを追加する必要があります。上のセルに

写真を投稿したので見てもらえますか?前のコラムにはそれがありません

[img=http://xiangce.baidu.com/picture/album/list/3c85e96b5077a2d65f956707600fedff7f9312e1][/img]

<div height="23px" style="overflow: hidden;"><table border="1px" cellpadding="0" cellspacing="0"   width="100%"><tbody>  <tr class="tr" align="center" cols="5">  <td width="20%">姓名</td>  <td width="20%">性别</td>  <td width="20%">民族</td>  <td width="20%">号码</td>  <td width="20%">操作</td>  </tr></tbody></table></div><div  style="overflow: auto;height:230px;" ><table border="1px" cellpadding="0" cellspacing="0"   width="100%"><tbody>  <?php	  $sql="select * from `test`";	  $sqln=mysql_query($sql);	  while($row = mysql_fetch_array($sqln)){  ?>  <tr class="tr1" align="center" cols="5">  <td width="20%"><?php echo $row[name];?></td>  <td width="20%"><?php echo $row[sex];?></td>  <td width="20%"><?php echo $row[nation];?></td>  <td width="20%"><?php echo $row[number];?></td>  <td width="20%">操作</td>  </tr>  <?php	  }  ?></tbody></table></div>

[img=http://xiangce.baidu.com /picture/album/list/3c85e96b5077a2d65f956707600fedff7f9312e1][/img]

xdw250701181 のフォト アルバム > デフォルト アルバム
(0 写真)

最初のテーブル パーツ
0d5e4e730a1ab338aa50f001af91abb3

これで問題は一時的に解決されますが、永続的な解決策には js が必要です
オンラインには 10 個以上の JS グリッドがあります。使用するものを選択してみてはいかがでしょうか

写真の投稿方法がわかりません

最初のテーブル部分

d28a5edb1450515df8e83ee8cabbcbbd
0d5e4e730a1ab338aa50f001af91abb3

これで問題は一時的に解決されますが、永続的な解決策には js が必要です
さらに、10 個以上の JS グリッドがあります。どれかを選択して使用してみてはいかがでしょうか。

JS についてはまだわかりません。JS コードを教えていただければ幸いです。
JS を学ぶ時間です。

それはテーブルに入れることができます

<div height="23px" style="overflow: hidden;"><table border="1px" cellpadding="0" cellspacing="0"   width="100%"><thead>  <tr class="tr" align="center" cols="5">  <td width="20%">姓名</td>  <td width="20%">性别</td>  <td width="20%">民族</td>  <td width="20%">号码</td>  <td width="20%">操作</td>  </tr></thead><tbody>  <?php      $sql="select * from `test`";      $sqln=mysql_query($sql);      while($row = mysql_fetch_array($sqln)){  ?>  <tr class="tr1" align="center" cols="5">  <td width="20%"><?php echo $row[name];?></td>  <td width="20%"><?php echo $row[sex];?></td>  <td width="20%"><?php echo $row[nation];?></td>  <td width="20%"><?php echo $row[number];?></td>  <td width="20%">操作</td>  </tr>  <?php      }  ?></tbody></table></div>

コードを変更しましたが、検証しませんでした。自分で検証することはできますが、それがアイデアです

ああ、意味はわかりました。最初の行は次のようになります。修正したら、もう一度考えます

ああ、最初の行を修正したいということはわかりました。その後、もう一度考えます

一度に 1 つのテーブルを修正するのと同じくらい簡単です。
js のやり方を知っていますか
rree

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。