我正在玩弄 HTML 表格，colspan=3 的 th 不应该有边框顶部和底部，但它有。这是什么原因？
我已经删除了边框和 border: 0px solid black。
我还创建了这个 fiddle .
截图:
PS:我知道表格不应该用于布局我只是想了解表格的工作原理。
更新:
我知道当我不使用 border-collapse: collapse 时，这些额外的边框不会出现，但需要为我的表格的其余部分使用 border-collapse .
<!doctype html>
<html>
<head>
<style>
html,body {height: 100%;
margin:0;
padding: 0px;
}
table {width: 100%;
height: 100%;
}
table, td, th, .box{ border:0px solid black;
border-collapse: collapse;
padding: 0;
}
.main {width: 980px;
margin: 0px auto;
border-width: 1px;}
/* header */
.main .header { height: 150px;
border-bottom-width: 1px;}
.main .header td{ width: 150px;
vertical-align: top;}
.main .header td img {float: right;}
.main .header td img[src*='flag'] {margin: 5px 3px 0px 4px;}
/* header */
/* Nav */
.main .nav {
height: 32px;
border-bottom-width: 1px;}
.main .nav th {
width: 25%;
border-right-width: 1px;
}
.main .nav th:nth-last-child(1) {
border-right-width: 0px;
}
.main .nav th:first-letter{ text-transform: uppercase;
color: red;}
.main .nav th:hover { background-color: black;
color:white;}
/* Content */
.main .Content {
padding: 70px 130px 20px;
}
.main .Content td {
width: 300px;
height: 300px;
border-width: 1px;
}
</style>
</head>
<body>
<table class="main">
<tr>
<td class="header">
<table>
<tr>
<td><img src="image/logo.jpg"></td>
<th>Site Name</th>
<td><img src="image/flag-nl.png" /><img src="image/flag-us.png" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="nav">
<table>
<th>Product</th>
<th>Support</th>
<th>services</th>
<th>about us</th>
</table>
</td>
</tr>
<tr>
<td class="Content">
<table>
<tr>
<td>1</td>
<th>2</th>
<td>3</td>
</tr>
<tr><th colspan="3"> </th></tr>
<tr>
<td>1</td>
<th>2</th>
<td>3</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</pre>
最佳答案
尝试删除这个:border-collapse: collapse;
关于html - th 的额外边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47484667/