HTML/CSS：垂直边框重叠水平边框

Posted 2023-03-05

【中文标题】HTML/CSS：垂直边框重叠水平边框

【英文标题】：HTML/CSS : Vertical border overlapping horizontal border

【发布时间】：2013-11-08 12:14:29

【问题描述】：

这是小提琴： http://jsfiddle.net/AV38G/

html

<table>
    <tr class="first-line">
        <td class="first-column">Some</td>
        <td>Foobar</td>
        <td>Stuff</td>
    </tr>
    <tr>
        <td class="first-column">foobar</td>
        <td>raboof</td>
        <td>184</td>
    </tr>
    <tr>
        <td class="first-column">bar</td>
        <td>87458</td>
        <td>184</td>
    </tr>
    <tr>
        <td class="first-column">874</td>
        <td>raboof</td>
        <td>foobar</td>
    </tr>
</table>

---

CSS：

/* ACTUAL CSS */
table 
    width: 300px;
    border-collapse: collapse;

tr td.first-column
    border-left: none;

tr.first-line 
    border-bottom: 3px solid green;
    border-top: none;

tr.first-line td 
    border-left: none;

td 
    border-left: 3px solid red;

tr 
    border-top: 3px solid red;

丑陋，对。那么为什么红色边框会覆盖/覆盖绿色边框呢？

如何获得“未触及”的水平绿色 bordel ？ （请不要使用 HTML5/CSS3，可访问性目的）

【参考方案1】：

这种行为是由于您折叠表格的边框而引起的，请改用border-spacing: 0;，在第一个数据行上调用一个类，然后我使用下面的选择器关闭border-top

.second-row td 
    border-top: 0;

Demo（在 chrome 和 firefox 上测试）

/* ACTUAL CSS */
table 
    width: 300px;
    border-spacing: 0;


tr td.first-column
    border-left: none;


td 
    border-left: 3px solid red;
    border-top: 3px solid red;


tr.first-line td 
    border-left: none;
    border-bottom: 3px solid green;
    border-top: none;


.second-row td 
    border-top: 0;

【讨论】：

@JamesDonnelly 谢谢 :) 这是一种真正的体育精神，因为您的回答得到了一些好评，但不幸的是它不是跨浏览器...