3

動的テーブル ジェネレーターを作成しています。テスト中に、生成された次の HTML がすべてのブラウザー (Firefox、Chrome、IE) で予期しないレイアウトになることがわかりました。

<table>
    <tr>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

私は2x3のテーブルを期待しています。上隅が中央の行の左のセルと結合され、中央の行の右のセルが右下のセルと結合されていますが、代わりに2X2のグリッドになりました

cssまたは行/セル属性に高さを指定したとしても、補足です。結果のテーブルのレイアウトは変更されません。

p/si は、これをレイアウトに使用するつもりはありません。このような奇妙なレイアウトからの意図しない影響から私のコードを馬鹿に証明したいだけです

編集:

期待される:

|------|-------|
|      |       |
|      |       |
|      |-------|
|      |       |
|      |       |
|------|       |
|      |       |
|      |       |
|------|-------|

結果:

|------|-------|
|      |       |
|      |       |
|------|-------|
|      |       |
|      |       |
|------|-------|

編集 2: CSS を追加

table { 
   border: 2px solid #000000;
   padding: 10px;
}
td { 
   border: 2px solid #FF0000;
   height: 100px;
   width: 100px;
   padding: 10px;
}
tr {
   border: 2px solid #00FF00;
   padding: 10px
}

私も試しました:

<table>
    <tr>
        <td rowspan="2" style="border: 1px solid #FF0000; height:200px"></td>
        <td style="border: 1px solid #FF0000; height:100px"></td>
    </tr>
    <tr>
        <td rowspan="2" style="border: 1px solid #FF0000; height:200px"></td>
    </tr>
    <tr>
        <td style="border: 1px solid #FF0000; height:100px"></td>
    </tr>
</table>
4

0 に答える 0