2

私は次のhtmlコードを持っています:

<table border="1">
    <tbody>
        <tr>
            <td rowspan="4">1 Rowspan=4</td>
            <td rowspan="3">2 Rowspan=3</td>
        </tr>
        <tr>
            <td>3 something</td>
        </tr>
        <tr>
            <td>4 something</td>
        </tr>
        <tr>
            <td>5 something</td>
        </tr>
        <tr>
            <td>6 something</td>
            <td>7 something</td>
        </tr>
        <tr>
            <td>8 something</td>
            <td>9 something</td>
        </tr>
    </tbody>
</table>

次のように動作します。

ここに画像の説明を入力してください

これは間違っています!列は2つだけである必要があります。

セル#3を#2の下に、#4を#1の下に配置したいと思います。

なぜそれが不可能なのですか?

ここにフィドルがあります:http://jsfiddle.net/FvY5b/

4

2 に答える 2

2

マークアップはHTMLテーブルモデルに違反しています。HTML5モードでhttp://validator.w3.orgを使用してマークアップを確認すると、「テーブルの行の幅が3列で、最初の行で確立された列数を超えました(2)」というエラーが報告されます。

したがって、@Aditiの回答とうちはマダラのコメントで示唆されているように、CSSの最初の行の高さを変更rowspan="4"rowspan="2"て削除rowspan="3"し、設定します(明らかな目的は、そうでない場合よりも高くすることです)。

于 2013-02-04T14:56:02.647 に答える
1

Try this for the first two rows...

<tr>
        <td rowspan="2">1 Rowspan=4</td>
        <td>2 Rowspan=3</td>
</tr>
<tr>
            <td>4 something</td>
        </tr>
        <tr>
            <td>3 something</td>
        </tr>
于 2013-02-04T13:26:37.423 に答える