Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Double dotted border while using colspan

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 &nbsp; inside the first <td> instead of an image and this hasn't worked either.

Any ideas anyone?

like image 993
Jake N Avatar asked Oct 11 '11 11:10

Jake N


People also ask

How do you add a double border to a table?

By setting the border width to 3px with they border style of double, this makes each border 1px plus 1px space between (1+1+1). Basically you should try to set the border width to values divisible by 3.

What 3 types of border styles can a table have?

border-bottom-style. border-left-style. border-right-style.

How do I control a dotted border in CSS?

IF you're only targeting modern browsers, AND you can have your border on a separate element from your content, then you can use the CSS scale transform to get a larger dot or dash: border: 1px dashed black; border-radius: 10px; -webkit-transform: scale(8); transform: scale(8);


2 Answers

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

like image 165
Rob W Avatar answered Nov 16 '22 01:11

Rob W


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/

like image 30
Victor Avatar answered Nov 16 '22 01:11

Victor