Double dotted border while using colspan

Question

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

I have a table

<table>
    <tr>
        <td colspan="3">
            <img src="something.png" />
        </td>
    </tr>
    <tr>
        <td>
            Hello
        </td>
        <td>
            World
        </td>
        <td>
            !
        </td>
    </tr>
</table>

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

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

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.

Any ideas anyone?

is the table also has border? try with setting table border as none. — Punit, Oct 11 '11 at 11:23
Which browser(s) are you seeing this in? I'm not getting it in a jsfiddle running Firefox 7.0.1: http://jsfiddle.net/yePHg/ — Pat, Oct 11 '11 at 12:53
Chrome 14.0, just tried in Firefox 7.0.1 and it works fine for me. Both on Mac OS X. — Jake N, Oct 11 '11 at 14:22
Can you please post the full CSS / HTML you are using for this rather than just the snippet? — JoshDM, Oct 21 '11 at 18:28
I would, but it's got a huge style sheet, it's also in a logged in area of a site. This is the best I can provide. — Jake N, Oct 28 '11 at 11:00
2019 and this is still an issue. not sure if it's a bug in chrome but sure seems like one — But those new buttons though.., Jul 03 '19 at 19:51

score 25 · Accepted Answer · edited Oct 24 '11 at 23:59

25

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

edited Oct 24 '11 at 23:59

egid

685
3
14

answered Oct 22 '11 at 14:26

Rob W

341,306
83
791
678

No solid answer yet still Rob W. So, you win! – Jake N May 11 '12 at 15:32
this saved me a couple cycles. Thanks! – Hcabnettek Feb 27 '14 at 16:49

score 3 · Answer 2 · answered Oct 12 '11 at 22:19

3

If you set the border on the table cells instead of the table rows, it will work.

I could only reproduce the bug in IE, but there are other known issues with the way that tables in IE render borders.

See this: http://jsfiddle.net/yePHg/19/

answered Oct 12 '11 at 22:19

Victor

4,989
6
31
47

Thanks Victor, I am sure i have tried this though. I will try again. – Jake N Oct 13 '11 at 09:28

yunzen · Answer 3 · 2011-10-27T11:35:04.507

2

Add a row with a <hr /> between and then give the border to that hr

http://jsfiddle.net/Y5Gec/

edited Oct 27 '11 at 11:35

answered Oct 27 '11 at 11:28

yunzen

32,854
11
73
106

upvoted for out of the box respectable fix. Interesting approach. – Hcabnettek Feb 27 '14 at 16:49

score 1 · Answer 4 · answered Oct 28 '11 at 06:59

1

Try applying css display: block; on the tr:

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

answered Oct 28 '11 at 06:59

cristy

317
3
9

score 0 · Answer 5 · edited Mar 14 '13 at 14:19

I hit this same problem!

border-collapse: separate

worked great, but it also separated my borders (shocker, right?). I wanted a single dotted line. So here's what I did.

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>

score 0 · Answer 6 · answered Oct 22 '11 at 11:57

0

Try to add this css:

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

answered Oct 22 '11 at 11:57

bogdanmogo

123
2
9

Double dotted border while using colspan

6 Answers6

Linked