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