如何禁用 "table" 标签行为

Question

如果 table 的不同行存在重叠连接，则该行可能会消失：

<table border="1" bordercolor="#999" cellspacing="0px" cellpadding="2px" width="100%">
<tbody>
<tr>
<td rowspan="2">
<div>R1C1:R2C1 (row 1)</div>
</td>
<td>
<div>R1C2 (row 1)</div>
</td>
</tr>
<tr>
<td rowspan="2">
<div>R2C2:R3C2 (row 2)</div>
</td>
</tr>
<tr>
<td>
<div>R3C1 (row 3 should not be here)</div>
</td>
</tr>
</tbody>
</table>

这是 unacceptable。可能不得不放弃“table”标签。怎么办？

Answer 1

您在 table 的第一行包含了两个 td 元素，但在 table 的第二行和第三行只包含了一个 td 元素，这将破坏您的 table 布局 - 浏览器不知道该单元格应该跨越哪一列。修复此问题，您的 table 应该可以正常工作。

Answer 2

你的意思不是 100% 清楚。但是我删除了 rowspan 并将 colspan 添加到代码中。 Colspan 会将您的单元格跨越多个 columns/cells.

可在此处找到更多信息： https://www.w3schools.com/tags/att_td_colspan.asp

<table border="1" bordercolor="#999" cellspacing="0px" cellpadding="2px" width="100%">
<tbody>
<tr>
<td>
<div>R1C1:R2C1 (row 1)</div>
</td>
<td>
<div>R1C2 (row 1)</div>
</td>
</tr>
<tr>
<td colspan="2">
<div>R2C2:R3C2 (row 2)</div>
</td>
</tr>
<tr>
<td colspan="2">
<div>R3C1 (row 3)</div>
</td>
</tr>
</tbody>
</table>

Answer 3

有几个问题：

Table格式错误（确保td个数匹配，即使是空）

    <table>
        <thead>
            <tr>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

错误应用的样式（使用<style>或引用样式表来应用它们）

    <table style="color:white;background-color:black;">

补充：不要用那么多div

虽然使用您正在使用的 div 并没有什么问题，但使用太多通常会导致不良做法。

Answer 4

您可以使用一些 CSS 技巧来隐藏最后一列的边框，以便 table 根据您的要求对齐。

table td.last { 
border-left: hidden;
border-top:hidden;
}
table td.last2 { 
border-left: hidden;
border-bottom:hidden
}

<table border="1" bordercolor="#999" cellspacing="0px" cellpadding="2px" width="100%">
<tbody>
<tr>
<td rowspan="2">
<div>R1C1:R2C1 (row 1)</div>
</td>
<td colspan="2">
<div>R1C2 (row 1)</div>
</td>
</tr>
<tr>
<td rowspan="2" style="border-right:hidden">
<div>R2C2:R3C2 (row 2)</div>
</td>
<td class="last2"><br></td>
</tr>
<tr>
<td>
<div>R3C1 (row 3 should not be here)</div>
</td>
<td class="last"><br></td>
</tr>
</tbody>
</table>

如何禁用 "table" 标签行为

How to disable the "table" tag behavior

html

html-table