ホームページ > ウェブフロントエンド > htmlチュートリアル > テーブル内のネストされた並列 TD が外側の table_html/css_WEB-ITnose を破壊しないようにする方法

テーブル内のネストされた並列 TD が外側の table_html/css_WEB-ITnose を破壊しないようにする方法

WBOY
リリース: 2016-06-24 12:14:20
オリジナル
1048 人が閲覧しました

幅を 700 ピクセルに設定したテーブルを定義しましたが、その中には多数の TD があります。
内部に埋め込まれた TD が外側のテーブルを壊さないようにするにはどうすればよいでしょうか?

さらに、... のコンテンツは中央揃えにする必要があります。 style='float:left' を指定すると、すべてが左側に表示されますが、これは私が望む効果ではありません。


テーブル構造は大まかに次のとおりです:

<table width=700px border=1>    <tr align=center>        <td width=150px>内嵌内容A</td>        <td width=150px>内嵌内容b</td>        <td width=150px>内嵌内容c</td>        <td width=150px>内嵌内容d</td> <!--按理说,到这行就该换行显示了,可事实上没有-->       <td width=150px>内嵌内容e</td>    </tr></table>
ログイン後にコピー


各 の幅は 150 です。論理的に言えば、4 の後に自動的に折り返されるはずですが、実際には自動的に折り返されません。代わりに、外側のテーブルがバーストしました

この問題はどうすれば解決できますか? DIV の使用はカウントされません。CSS 全体を再設計するには時間がかかります。


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


ul

に置き換える

TRのTDが改行で表示されるというのは聞いた事が無いですよね? ?

各 TD の幅は同じであるため、テーブル内の TD は折り返されません。そのため、すべての TD の幅がテーブル全体の幅を超えると、システムは次に従ってテーブルの幅を自動的に均等に分割します。 td の比率 すべての td


ul
に置き換えます
投稿者は、当分の間 CSS は考慮されないと言いました

先生、新しいテーブルを TD に埋め込むことしかできません

TD をループすることはできません、 TD は自動的にラップされません。テーブルの編集のみ可能です。 ループ

コード (float:left を使用する必要があります):

<table width=700px border=1>    <tr align=center>        <td width=150px><table style='float:left'><tr><td>内容1</td></tr></table></td>        <td width=150px><table style='float:left'><tr><td>内容2</td></tr></table></td>         <td width=150px><table style='float:left'><tr><td>内容3</td></tr></table></td>         <td width=150px><table style='float:left'><tr><td>内容4</td></tr></table></td>         <td width=150px><table style='float:left'><tr><td>内容5</td></tr></table></td>         <td width=150px><table style='float:left'><tr><td>内容6</td></tr></table></td>    </tr></table>
ログイン後にコピー

申し訳ありませんが、上階で間違えて TD を繰り返しました。正しいものは次のとおりです。

<table width=700px border=1>    <tr align=center>        <td width=150px>          <table style='float:left'><tr><td>内容1</td></tr></table>          <table style='float:left'><tr><td>内容2</td></tr></table>          <table style='float:left'><tr><td>内容3</td></tr></table>          <table style='float:left'><tr><td>内容4</td></tr></table>          <table style='float:left'><tr><td>内容5</td></tr></table>       </td>    </tr></table>
ログイン後にコピー

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