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>元素外，这种方法还可以。{/ p>

此元素具有双边框，因此显示为实线，删除colspan修复了问题。

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

任何想法？

Answer 1

在表格中添加border-collapse: separate;可解决此问题，请参阅 http://jsfiddle.net/quyMy/

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

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

Answer 2

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

我只能重现IE中的错误，但IE中的表格渲染边框的方式存在其他已知问题。

请参阅：http://jsfiddle.net/yePHg/19/

Answer 3

添加一行＆lt; hr /＆gt;介于两者之间，然后给出那个hr的边界

http://jsfiddle.net/Y5Gec/

Answer 4

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

    tr
    {
        border-top: 1px dotted #000;
        display: block;
    }

Answer 5

尝试添加此css：

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

Answer 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>

使用colspan时双点边框

6 个答案: