如何让这个表格只有 1 个像素边框？答案

【问题标题】：How to make this table only 1 pixel border?如何让这个表格只有 1 个像素边框？
【发布时间】：2012-08-07 00:17:19
【问题描述】：

我有这张桌子：

使用以下代码：

    <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，那么左上角的行会出现它的边框，即使是空单元格：隐藏...

有什么建议吗？

【问题讨论】：

标签： html css html-table

【解决方案1】：

尝试给表格单元格一个类并将其边框宽度设置为 0px。

【讨论】：

【解决方案2】：

您可以为左上角单元格指定覆盖样式，使用：

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

【讨论】：

【解决方案3】：

像这样？

http://jsfiddle.net/apJkX/

【讨论】：