为什么 colspan 会影响 html 表格边框 [英] Why does colspan affect html table borders
问题描述
所以我偶然发现了一些对我来说很奇怪的东西.
So I stumbled onto something that seems strange to me.
例如以下代码:
<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>
现在，我认为这会产生一个很好的表格结构，中间有一个空列无边框.只要你不包括那个
Now, I would think that this would result in a nice table structure with an empty column without borders in the middle. As long as you wouldn't include that
<tr style="height:20px">
<td colspan="8" style="border:0"></td>
</tr>
事实上确实如此.所以我的问题是为什么会发生这种情况?
it does, in fact. So my question is why does this happen?
我告诉新行(我认为这与前一行无关)我不想要任何边框.但是，只要我跨越 8 列的空白无边界行，就会在前一行的先前无边界列的底部添加一个边界.
I'm telling the new row (which I would think has nothing to do with the previous one) that I don't want any border. But as long as I span that empty, borderless row across my 8 columns a border is added across the bottom of the previously borderless column of the previous row.
我知道我可以通过不跨越我的空行并将其保留为空来解决这个问题 <tr style="height:20px"></tr> 但我会真的很想了解为什么会发生这种情况.
I know that I can fix this by not spanning my empty row and just leaving it as an empty <tr style="height:20px"></tr> but I would really like to just understand why this happens.
另外，我知道内联样式通常绝对不是要走的路，但这是用于 html 公司电子邮件，所以恐怕我别无选择.
Also, I know that inline style is normally definitely not the way to go, but this is for an html company email, so I'm afraid I have no other option.
推荐答案
这样就解决了 Chrome 中的问题:
This solves the problem in Chrome:
<tr style="height:20px">
<td colspan="8" style="border:3px solid transparent"></td>
</tr>
不知道为什么边框必须至少为 3px，但它有效.
Don't know why the border has to be at least 3px, but it works.
这篇关于为什么 colspan 会影响 html 表格边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
