如何讓這張表只有1個像素邊框？

image oftable

用下面的代碼：

<table border="1" id="comparativa"> 
     <tr> 
      <td rowspan="2"></td> 
      <td colspan="3" class="friuty">Fruity</td> 
     </tr> 
     <tr> 
      <td class="lila">Intensed</td> 
      <td class="lila">Medium</td> 
      <td class="lila">Low</td> 
     </tr> 
     <tr> 
      <td class="lila">Green</td> 
      <td><img src="img/forsutpeque.png" /></td> 
      <td><img src="img/donapeque.png" alt="" /></td> 
      <td>-</td> 
     </tr> 
     <tr> 
      <td class="lila">Mellow</td> 
      <td>-</td> 
      <td><img src="img/marpeque.png" alt="" /></td> 
      <td>-</td> 
     </tr> 
     <tr> 
      <td class="lila">Balanced</td> 
      <td>-</td> 
      <td><img src="img/cotxepeque.png" alt="" /></td> 
      <td>-</td> 
     </tr> 
    </table>

下面CSS

#comparativa { 
    width:350px; 
    font-size:1.2em; 
    border-spacing:0px; 
    border-collapse:separate; 
    empty-cells:hide !important; 
    border:0; 
} 
#comparativa tr td { 
    padding:2px 4px; 
    border:#9f4dc2 solid 1px; 
    text-align:center; 
    width:88px; 
    color:#bdac77; 
} 
#comparativa tr td.friuty { 
    background:#9f4dc2; 
    color:#fff; 
    text-transform:uppercase; 
} 
#comparativa tr td.lila { 
    background:#ecdff3; 
    text-transform:uppercase; 
    color:#9f4dc2; 
    text-align:left; 
    padding-top:2px; 
    padding-bottom:4px; 
    padding-left:10px; 
}

我想讓它的內邊框1px的寬度，同時還保留空的左上角單元格而不顯示邊框：

問題是，如果我放border-collapse:collapse那麼左上角的行會出現邊框，即使是空單元格：隱藏...

任何建議？

來源

2012-08-09 Aleix

您可以指定覆蓋樣式的左上角單元格，使用：

#comparativa tr:first-child td:first-child { border-left: 0; border-top: 0; }

來源

2012-08-09 17:55:39

感謝大聲笑，這是很簡單的 – Aleix 2012-08-09 17:57:31

@Tebb不客氣:) – 2012-08-09 18:01:24

嘗試給表格單元格一個類，並將其邊框寬度設置爲0px。

來源

2012-08-09 17:48:46

像這樣嗎？

http://jsfiddle.net/apJkX/

來源

2012-08-09 17:57:58 Kwon

如何讓這張表只有1個像素邊框？

回答

相關問題