Question

我正在创建一个动态表生成器，在测试过程中，我发现以下生成的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 / s我不打算将它用于布局;我只是想通过奇怪的布局（例如这个

）来防止我的代码来自非预期的效果

编辑：

预期：

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

结果：

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

编辑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>

使用HTML Table rowspan时出现意外行为

0 个答案: