動的テーブル ジェネレーターを作成しています。テスト中に、生成された次の 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>