0

私のウェブサイトのレイアウトにこの問題があり、基本的にそれを続けることができず、すべてが破壊されています.

HTMLコードは次のとおりです。

    <table cellpadding="0" cellspacing="0" width="446" height="362">
    <!-- MSTableType="layout" -->
    <tr>
        <td valign="top" colspan="2" height="110">
        <p align="center">Banner</td>
    </tr>
    <tr>
        <td valign="top" height="95">I want this cell to have a fixed height</td>
        <td valign="top" rowspan="3" width="305">
        <p align="center">Text goes here - if the text is too long, I want the 
        stretching cell to vary in height, not the other 2.</td>
    </tr>
    <tr>
        <td valign="top" height="68">I want this cell to have a fixed height</td>
    </tr>
    <tr>
        <td height="89" width="141" valign="top">Stretching/Flexible cell - I 
        want this one to vary in height if the text on the right cell is too 
        long</td>
    </tr>
</table>

ご覧のとおり、「テキスト セル」の高さよりも大きいテキストを書くと、右側の列のすべてのセルが伸びてしまい、最後のセルだけが伸びてしまいます。手伝って頂けますか？

4

5 に答える 5

0

左下のセル「*」の高さを次のようにします。

<table cellpadding="0" cellspacing="0" width="446" height="362">
    <!-- MSTableType="layout" -->
    <tr>
        <td valign="top" colspan="2" height="110">
        <p align="center">Banner</td>
    </tr>
    <tr>
        <td valign="top" height="95">I want this cell to have a fixed height</td>
        <td valign="top" rowspan="3" width="305">
        <p align="center">Text goes here - if the text is too long, I want the 
        stretching cell to vary in height, not the other 2.</td>
    </tr>
    <tr>
        <td valign="top" height="68">I want this cell to have a fixed height</td>
    </tr>
    <tr>
        <td height="*" width="141" valign="top">Stretching/Flexible cell - I 
        want this one to vary in height if the text on the right cell is too 
        long</td>
    </tr>
</table>

これでは、セルの最小の高さを定義できませんが、機能します。もちろん、css を使用することをお勧めします。

実際、これについて考えると、右の列の高さを「257」に設定できます（左の高さの合計。つまり、右の列が伸びない場合、* はデフォルトで 89 になります。

しかし、これはクロスブラウザー互換性がないことは確かです...はい、IE6をちりばめただけで、期待どおりに動作しません。ただし、Firefoxはうまく機能します。

これはおそらく、css が最善の策であることを意味します。

于 2009-11-13T22:20:40.387 に答える
0

表のあるウェブサイトを作ろうとするなら、21世紀へようこそ。テーブルのレイアウトは非常に時代遅れです。http://www.pmob.co.uk/temp/3colfixedtest_4.htmのようなサイトを試してください。そこに Web 標準レイアウトがあります。

于 2009-11-13T22:21:20.490 に答える
0

上記のように、あなたの質問に対する答えではありませんが、やりたいことを行うための最良の方法は、<DIV>タグを使用して CSS レイアウトを作成する方法を学ぶことです。これにより、ページ レイアウトをより詳細に制御できるようになります。前もって学習する必要がありますが、将来、テーブルを使用する際の頭痛の種を大幅に減らすことができます。

実際、あなたの例をもう一度見てください。ここでのベースレイアウトは非常に単純です。

<div id='container'>
   <div class='banner'>Banner</div>
   <div class='fixed'>Fixed Height</div>
   <div class='dynamic'>Expanding div to fit text inside</div>
   <div class='fixed'>Fixed Height</div>
   <div class='dynamic'>Expanding div to fit text inside</div>   
</div>

これにより、いくつかの CSS スタイルを使用してテーブルと同じレイアウトが得られます。

編集：この件について最後に一言。個人的には、領域がグリッド タイプの領域であり、さまざまな領域に特別な書式設定が必要ないことがわかっている場合<table>は問題ありません。それ以外の場合は、常に CSS ベースのレイアウトを使用します。

于 2009-11-13T22:33:56.100 に答える
0

HTML を使用する代わりに、少なくともいくつかの CSS を学び、それを使用してテーブルのスタイルとサイズを変更するようにします。そこには多くの優れたチュートリアルがありますが、例えば:

table {
   width: 600px;
}

table td {
   padding: 5px;
}

テーブルの幅を 600 ピクセルにし、5 ピクセルごと<td>にパディングを与えます。より正確な制御のために、任意のセルまたは行idsを (一意) および(グループに適用) に割り当てます。classes

于 2009-11-13T22:42:30.840 に答える