Question

所以我偶然发现了一些对我来说很奇怪的事情。

例如，以下代码：

<html>
    <table style="border-collapse:collapse;">
        <tr>
            <td align="center" colspan="8" style="border:3px solid black;">Title</td>
        </tr>
        <tr>
            <td style="border:2px solid black; width:175px">Destination</td>
            <td style="border:2px solid black;" colspan="2">STR</td>
            <td></td>
            <td style="border:2px solid black;" colspan="2">Order Date</td>
            <td style="border:2px solid black;" colspan="2">24/jan/14</td>
        </tr>
        <tr>
            <td style="border:2px solid black;">SV Truck nr</td>
            <td style="border:2px solid black;" colspan="2">SV92566T/24JAN</td>
            <td></td>
            <td style="border:2px solid black;" colspan="2">Order time</td>
            <td style="border:2px solid black;" colspan="2">18HO</td>
        </tr>
        <tr style="height:20px">
            <td colspan="8" style="border:0"></td>
        </tr>
    </table>
</html>

现在，我认为这会产生一个漂亮的表结构，中间有一个空列无边框。只要你不包含那个

<tr style="height:20px">
    <td colspan="8" style="border:0"></td>
</tr>

事实上它确实如此。所以我的问题是为什么会发生这种情况？

我告诉新行（我认为与前一行无关）我不想要任何边框。但只要我跨越我的8列空白无边框行，就会在前一行的前一个无边框列的底部添加一个边框。

我知道我可以通过不跨越我的空行并将其留空<tr style="height:20px"></tr>来解决这个问题，但我真的很想知道为什么会发生这种情况。

此外，我知道内联样式通常绝对不是可行的方式，但这是针对html公司的电子邮件，所以我担心我别无其他选择。

Answer 1

这解决了Chrome中的问题：

<tr style="height:20px">
  <td colspan="8" style="border:3px solid transparent"></td>
</tr>

不知道为什么边界必须至少3px，但它有效。

Fiddle

为什么colspan会影响html表格边框

1 个答案: