テーブルの罫線でChromeのCSSの問題

Google Chromeでこれを開く際に問題が発生しています。恒常的に不要な罫線が表示されます。何かアドバイス？ここに私のHTMLとCSSのコードがあります：テーブルの罫線でChromeの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> \t \t 
 
      <td>50€</td> 
 
      <td>45€</td> 
 
      <td>65€</td> \t \t 
 
      <td>38€</td> 
 
      <td>30€*</td> 
 
      <td>50€</td> 
 
      <td>65€</td> 
 
     <tr> 
 
      <td>A</td> 
 
      <td>45€</td> \t \t 
 
      <td>35€</td> 
 
      <td>55€</td> 
 
      <td>33€</td> \t \t 
 
      <td>30€*</td> 
 
      <td>45€</td> 
 
      <td>55€</td> 
 
     </tr> 
 
     <tr> 
 
      <td>B</td> 
 
      <td>35€</td> \t \t 
 
      <td>30€</td> 
 
      <td>45€</td> 
 
      <td>28€</td> \t \t 
 
      <td>30€*</td> 
 
      <td>35€</td> 
 
      <td>45€</td> 
 
     </tr> 
 
     <tr> 
 
      <td>C</td> 
 
      <td>30€</td> \t \t 
 
      <td>-</td> 
 
      <td>35€</td> 
 
      <td>-</td> \t \t 
 
      <td>30€*</td> 
 
      <td>30€</td> 
 
      <td>35€</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Bancada Poente e Nascente</td> 
 
      <td>-</td> \t \t 
 
      <td>-</td> 
 
      <td>30€</td> 
 
      <td>-</td> \t \t 
 
      <td>30€*</td> 
 
      <td>-</td> 
 
      <td>-</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Bancada Norte</td> 
 
      <td>-</td> \t \t 
 
      <td>-</td> 
 
      <td>25€</td> 
 
      <td>-</td> \t \t 
 
      <td>30€*</td> 
 
      <td>-</td> 
 
      <td>-</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Plateia em Pé</td> 
 
      <td>25€</td> \t \t 
 
      <td>20€</td> 
 
      <td>25€</td> 
 
      <td>20€</td> \t \t 
 
      <td>30€*</td> 
 
      <td>25€</td> 
 
      <td>30€</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Mobilidade Condicionada</td> 
 
      <td>B</td> \t \t 
 
      <td>A</td> 
 
      <td>B</td> 
 
      <td>A</td> \t \t 
 
      <td>*</td> 
 
      <td>B</td> 
 
      <td>B</td> 
 
     </tr> 
 
     </table> 
 
     <p>*Bilhete Único</p> 
 
    </div> 
 
    </body> 
 
</html>

出典

2016-05-16 João Carlos Novo

あなたは余分な行や余分なセルを使用して、テーブルと、この余分なセルから枠線を削除する必要がある、という考えは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>

私が理解したら：

出典

2016-05-16 20:23:56

テーブルの罫線でChromeのCSSの問題

答えて

関連する問題