使用 colspan 时出现双虚线边框 [英] Double dotted border while using colspan

问题描述

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

I have what seems like a simple problem, but searching the net hasn't yielded any results.

我有一张桌子

<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，除了中央 ，这很好用> 第二个 中的元素.

The <tr> elements all have border-top: dotted 1px black, this works fine apart from the central <td> element in the second <tr>.

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

This element has a double border and so appears as a solid line, removing the colspan fixes the issue.

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

I have tried applying border-collapse: collapse to the the table and this hasn't worked, I have tried adding content in the form of   inside the first <td> instead of an image and this hasn't worked either.

大家有什么想法吗?

推荐答案

将 border-collapse: separate; 添加到您的表中可修复该问题，请参阅 http://jsfiddle.net/quyMy/

Adding border-collapse: separate; to your table fixes the issue, see http://jsfiddle.net/quyMy/

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

I've added a dynamic test case to that fiddle. Click anywhere, and the visibility of the original/new table will toggle, allowing you to see the difference much easier.

另一种摆脱意外边界的方法是在包含>.

Another way to get rid off the unexpected border is to add a plain <tr></tr> after the row containing <td colspan=3>.

这篇关于使用 colspan 时出现双虚线边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！