6

我有一个我希望/<table>中的垂直边框与其余边框颜色不同的地方（所有边框都是 1 像素宽，表格顶部没有边框）。这看起来很简单——问题是在 Firefox、Safari 和 Chrome 中，这些垂直边框“渗入”下面的水平边框，看起来不太好。在 Firefox 中，如果 下方的行包含与 相同数量的列/单元格，它看起来没问题，但如果我使用，我会得到“出血”。<thead><th><thead><thead><colspan>

显而易见的解决方案是在垂直边框上使用例如“solid”，在下面的<th>水平边框上使用“double” <td>——这在 Safari 和 Chrome 中确实有效。但是，我还没有为 Firefox 想出一个解决方案，我想我已经尝试了一切。我无法删除边框折叠，因为这是其他目的所需要的。（是的，默认情况下它看起来像我想要的 IE8 和 Opera！）

查看示例：http: //jsfiddle.net/7YdCQ/

代码（一个非常简单的带有强烈颜色的示例）- CSS（所有边框都是实心的）：

table { border-collapse: collapse; }
thead th { border-left: 1px solid #F00; border-right: 1px solid #F00; }
tbody th, td { border: 1px solid #0F0; }

HTML（2 个表格，1 个带有 colspan）：

<table>
    <thead>
        <tr>
            <th>Thead TD 1</th>
            <th>Thead TD 2</th>
            <th>Thead TD 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="3">Tbody TH colspan 3</th>
        </tr>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>
<table>
    <thead>
        <tr>
            <th>Thead TD 1</th>
            <th>Thead TD 2</th>
            <th>Thead TD 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>

两件事，第一个构造函数没有返回类型，所以

void Calc() {}

不是要走的路 - 失去void返回类型。其次，您需要在Calc成员函数上使用范围解析运算符 - 再次丢失void

 Calc::Calc(const Calc& other){
 }
4

1 回答 1

1

解决方案是正确覆盖 CSS 样式。使用colspanin和标签<th>进行测试。编辑示例：http: //jsfiddle.net/7YdCQ/21/<thead><tbody>

CSS

table { border-collapse: collapse; }
tbody th, tbody td { border: 1px solid #0F0; }
thead td, thead th, tbody th { border-left: 1px solid #F00; border-right: 1px solid #F00; }

HTML

<table>
    <thead>
        <tr>
            <th>Thead TH 1</th>
            <td colspan='2'>Thead TD colspan 2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan='3'>Tbody TH colspan 3</th>
        </tr>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>
<br>
<table>
    <thead>
        <tr>
            <th>Thead TD 1</th>
            <th>Thead TD 2</th>
            <th>Thead TD 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>
于 2012-11-04T21:23:47.507 回答