我在Google Chrome中打开此功能时遇到问题，但它始终显示不需要的边框。有什么建议？这是我的HTML和CSS代码：
body, html {
margin:0;
font:1em "Glegoo", slab-serif;
}
table, td, th {
padding:5px;
text-align:center;
border:1px solid #000;
}
table {
width:60%;
text-align:center;
margin:0px auto 0px auto;
overflow:hidden;
float:center;
empty-cells:hide;
border-collapse:collapse;
}
th {
background-color:#000;
color:white;
text-align:center;
}
td {
width:20%;
}
td:empty {
visibility:hidden;
border:none;
outline:none;
}
.edp-bilhetes{
text-align:center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>musicUS</title>
<link rel="stylesheet" href="C:\Users\JoãoCarlos\Desktop\musicUS\main.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Glegoo">
</head>
<body>
<div class="edp-bilhetes">
<br><br>
<table>
<tr>
<td></td>
<div class "table-hide"><td></td></div>
<th colspan="7">Dia</th>
</tr>
<tr>
<td></td>
<td></td>
<td><b>12 de Julho</b></td>
<td><b>17 de Julho</b></td>
<td><b>20 de Julho</b></td>
<td><b>21 de Julho</b></td>
<td><b>23 de Julho</b></td>
<td><b>26 de Julho</b></td>
<td><b>27 de Julho</b></td>
</tr>
<tr>
<th rowspan="8">Plateia</th>
<td>VIP</td>
<td>50€</td>
<td>45€</td>
<td>65€</td>
<td>38€</td>
<td>30€*</td>
<td>50€</td>
<td>65€</td>
<tr>
<td>A</td>
<td>45€</td>
<td>35€</td>
<td>55€</td>
<td>33€</td>
<td>30€*</td>
<td>45€</td>
<td>55€</td>
</tr>
<tr>
<td>B</td>
<td>35€</td>
<td>30€</td>
<td>45€</td>
<td>28€</td>
<td>30€*</td>
<td>35€</td>
<td>45€</td>
</tr>
<tr>
<td>C</td>
<td>30€</td>
<td>-</td>
<td>35€</td>
<td>-</td>
<td>30€*</td>
<td>30€</td>
<td>35€</td>
</tr>
<tr>
<td>Bancada Poente e Nascente</td>
<td>-</td>
<td>-</td>
<td>30€</td>
<td>-</td>
<td>30€*</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Bancada Norte</td>
<td>-</td>
<td>-</td>
<td>25€</td>
<td>-</td>
<td>30€*</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Plateia em Pé</td>
<td>25€</td>
<td>20€</td>
<td>25€</td>
<td>20€</td>
<td>30€*</td>
<td>25€</td>
<td>30€</td>
</tr>
<tr>
<td>Mobilidade Condicionada</td>
<td>B</td>
<td>A</td>
<td>B</td>
<td>A</td>
<td>*</td>
<td>B</td>
<td>B</td>
</tr>
</table>
<p>*Bilhete Único</p>
</div>
</body>
</html>
答案 0 :(得分：0)
你需要使用一个额外的行和一个额外的单元格并从表格和这个额外的单元格中删除边框，我们的想法是将colspan和rowpan分配到2个不同的行，以便打破它们：
body,
html {
margin: 0;
font: 1em"Glegoo", slab-serif;
}
table,
td,
th {
border: 1px solid #000;
padding: 5px;
text-align: center;
}
table,
table tr:first-of-type td {
border: none;
}
table {
border-collapse: collapse;
width: 60%;
text-align: center;
margin: 10px auto 0px auto;
overflow: hidden;
}
th {
background-color: #000;
color: white;
text-align: center;
}
td {
width: 20%;
}
.edp-bilhetes {
text-align: center;
}<div class="edp-bilhetes">
<table>
<tr>
<td></td>
<th colspan="8">Dia</th>
</tr>
<tr>
<th rowspan="10">Plateia</th>
</tr>
<tr>
<td>-</td>
<td><b>12 de Julho</b>
</td>
<td><b>17 de Julho</b>
</td>
<td><b>20 de Julho</b>
</td>
<td><b>21 de Julho</b>
</td>
<td><b>23 de Julho</b>
</td>
<td><b>26 de Julho</b>
</td>
<td><b>27 de Julho</b>
</td>
</tr>
<tr>
<td>VIP</td>
<td>50€</td>
<td>45€</td>
<td>65€</td>
<td>38€</td>
<td>30€*</td>
<td>50€</td>
<td>65€</td>
<tr>
<td>A</td>
<td>45€</td>
<td>35€</td>
<td>55€</td>
<td>33€</td>
<td>30€*</td>
<td>45€</td>
<td>55€</td>
</tr>
<tr>
<td>B</td>
<td>35€</td>
<td>30€</td>
<td>45€</td>
<td>28€</td>
<td>30€*</td>
<td>35€</td>
<td>45€</td>
</tr>
<tr>
<td>C</td>
<td>30€</td>
<td>-</td>
<td>35€</td>
<td>-</td>
<td>30€*</td>
<td>30€</td>
<td>35€</td>
</tr>
<tr>
<td>Bancada Poente e Nascente</td>
<td>-</td>
<td>-</td>
<td>30€</td>
<td>-</td>
<td>30€*</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Bancada Norte</td>
<td>-</td>
<td>-</td>
<td>25€</td>
<td>-</td>
<td>30€*</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Plateia em Pé</td>
<td>25€</td>
<td>20€</td>
<td>25€</td>
<td>20€</td>
<td>30€*</td>
<td>25€</td>
<td>30€</td>
</tr>
<tr>
<td>Mobilidade Condicionada</td>
<td>B</td>
<td>A</td>
<td>B</td>
<td>A</td>
<td>*</td>
<td>B</td>
<td>B</td>
</tr>
</table>
<p>*Bilhete Único</p>
</div>
如果我理解：）