双虚线边框，而使用合并单元格

我有什么似乎是一个简单的问题，但搜索网还没有产生任何结果。双虚线边框，而使用合并单元格

我有一个表

<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>而不是图像内，这已也不工作。

任何想法的人？

来源

2011-10-11 Jake N

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

'没有边界，''没有边界。 –

您在浏览器中看到了哪个浏览器？我没有在运行Firefox 7.0.1的jsfiddle中获得它：http://jsfiddle.net/yePHg/ – Pat

回答

添加border-collapse: separate;你的表修复该问题，请http://jsfiddle.net/quyMy/

我添加了一个动态的测试用例到那个小提琴。任意位置单击，和原来的/新表的知名度将切换，让你看到的差别要容易得多。

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

来源

2011-10-22 14:26:52

还没有确定的答案Rob W. So，你赢了！ –

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

如果你设置表格单元格，而不是表行的边框，它会奏效。

我只能再现IE错误，但也有在IE渲染表格边框的方式与其他已知的问题。

这个显示：http://jsfiddle.net/yePHg/19/

来源

2011-10-12 22:19:13 Victor

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

尝试添加这个CSS：

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

来源

2011-10-22 11:57:17 bogdanmogo

添加一行与< HR />之间，然后给边境，人力资源

http://jsfiddle.net/Y5Gec/

来源

2011-10-27 11:28:51 HerrSerker

upvoted开箱可敬的修复。有趣的方法。 – Hcabnettek

尝试在TR上应用CSS display: block;：

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

来源

2011-10-28 06:59:44 ambay

我打这个同样的问题！

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>

来源

2012-06-13 20:29:30

双虚线边框，而使用合并单元格

回答

相关问题