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

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

WBOY
リリース: 2016-06-24 12:15:01
オリジナル
1877 人が閲覧しました

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


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

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

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

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

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

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

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

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

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 写真)

最初のテーブル パーツ
< div style="高さ:23px;オーバーフロー:自動;" >



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

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

最初のテーブル部分




これで問題は一時的に解決されますが、永続的な解決策には 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

ソース:php.cn
全体をhyperlink_html/css_WEB-ITnoseにしてしまう問題について
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート