使用 colspan 时的双虚线边框

Posted 2023-03-05

【中文标题】使用 colspan 时的双虚线边框

【英文标题】：Double dotted border while using colspan

【发布时间】：2011-12-05 05:21:09

【问题描述】：

我遇到了一个看似简单的问题，但在网上搜索并没有得到任何结果。

我有一张桌子

<table>
    <tr>
        <td colspan="3">
            <img src="something.png" />
        </td>
    </tr>
    <tr>
        <td>
            Hello
        </td>
        <td>
            World
        </td>
        <td>
            !
        </td>
    </tr>
</table>

<tr> 元素都有border-top: dotted 1px black，除了第二个<tr> 中的中心<td> 元素之外，这都可以正常工作。

此元素具有双边框，因此显示为实线，删除colspan 可解决此问题。

我已经尝试将border-collapse: collapse 应用到表格中，但这没有奏效，我尝试在第一个<td> 中添加  形式的内容而不是图像，这也没有奏效.

有什么想法吗？

【问题讨论】：

表格是否也有边框？尝试将表格边框设置为无。

<table> 没有边框，<td>s 没有边框。

您在哪个浏览器中看到这个？我没有在运行 Firefox 7.0.1 的 jsfiddle 中得到它：jsfiddle.net/yePHg

Chrome 14.0，刚刚在 Firefox 7.0.1 中尝试过，对我来说效果很好。两者都在 Mac OS X 上。

能否请您发布您为此使用的完整 CSS / html 而不仅仅是 sn-p？

【参考方案1】：

将border-collapse: separate; 添加到您的表可解决此问题，请参阅http://jsfiddle.net/quyMy/

我在那个小提琴中添加了一个动态测试用例。单击任意位置，原始/新表的可见性将切换，让您更容易看到差异。

消除意外边框的另一种方法是在包含<td colspan=3> 的行之后添加一个普通的<tr></tr>。

【讨论】：

Rob W 仍然没有可靠的答案。所以，你赢了！

这为我节省了几个周期。谢谢！

【参考方案2】：

如果您在表格单元格而不是表格行上设置边框，它将起作用。

我只能在 IE 中重现该错误，但 IE 中的表格呈现边框的方式还有其他已知问题。

看到这个：http://jsfiddle.net/yePHg/19/

【讨论】：

谢谢维克多，我相信我已经尝试过了。我会再试一次。

【参考方案3】：

在

---

之间添加一行，然后为该 hr 添加边框

http://jsfiddle.net/Y5Gec/

【讨论】：

赞成开箱即用的可观修复。有趣的方法。

【参考方案4】：

尝试在 tr 上应用 css display: block;：

tr 边框顶部：1px 点缀#000； 显示：块；

【参考方案5】：

尝试添加这个css：

<style>
table, table *  border:0; padding:0; margin:0 
table td  border-top:1px dotted #000 
</style>

【参考方案6】：

我遇到了同样的问题！

border-collapse: separate

效果很好，但它也分隔了我的边界（令人震惊，对吧？）。我想要一条虚线。所以这就是我所做的。

CSS：

td 
border-right: 1px dotted #bbb;
border-left: 1px dotted #bbb;
border-bottom: 1px dotted #bbb;
border-top: none;
padding: .5em;


th 
border-right: 1px dotted #bbb;
border-left: 1px dotted #bbb;
border-top: 1px dotted #bbb;
border-top: 1px solid #bbb;
padding: .5em;

HTML

<table border="1">
    <tr>
        <th colspan="5"> DRESSES &amp; TOPS </th>
    </tr>
    <tr>
        <td> size </td>
        <td> numerical </td>
        <td> bust </td>
        <td> waist </td>
        <td> hip< </td>
    </tr>
</table>