使用colspan时双点边框

Question

我有一个看似简单的问题,但搜索网没有产生任何结果.

我有一张桌子

<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,这工作正常远离中央<td>的第二元件<tr>.

此元素具有双边框,因此显示为实线,从而colspan解决了问题.

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

任何人的想法？

Answer 1

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

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

摆脱意外边界的另一种方法是<tr></tr>在包含行之后添加一个平原<td colspan=3>.