1. 首頁
  2. 問答
  3. Chrome桌面邊框css問題

Chrome桌面邊框css問題

2016-05-16 114 views
0

我在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

回答

0

您需要使用額外的行和一個額外的電池，並從表而這額外的細胞去除邊框，這個想法是調度合併單元格和rowpan TH成2個不同的行，以打破它們APPART：

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

相關問題

 相關問題