使用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
,除了中心的< td>
code>< tr> 。
The <tr>
elements all have border-top: dotted 1px black
, this works fine apart from the central <td>
element in the second <tr>
.
此元素具有双边框,因此显示为实线, c $ c> colspan 修正了问题。
This element has a double border and so appears as a solid line, removing the colspan
fixes the issue.
我已尝试将 border-collapse:collapse
套用到表格,尝试在第一个< td>
内以& nbsp;
的形式添加内容,
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.
另一种摆脱意想不到的边框的方法是:点击任意位置,即可查看原始/新表格的显示设置。在包含< td colspan = 3>
的行之后添加一个简单的< tr>< / tr>
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屋!