CODEWITHSUNDEEP
htmlcss
Johan
Johan

Reputation: 35194

Dotted separating row in table

I'm trying to add a dotted separator after each table row. I want it to be located below the two middle cells like in the example below.

<table>
    <tr>
        <td></td>
        <td style="border-bottom: 1px dotted #000;">foo</td>
        <td style="border-bottom: 1px dotted #000;">bar</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td style="border-bottom: 1px dotted #000;">foo</td>
        <td style="border-bottom: 1px dotted #000;">bar</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td style="border-bottom: 1px dotted #000;">foo</td>
        <td style="border-bottom: 1px dotted #000;">bar</td>
        <td></td>
    </tr>
</table>

As you can see in the image or here, there is a gap between the two cell lines. Is there any way to solve this without adding a row with colspan in between each row?

enter image description here

Upvotes: 0

Views: 1759

Answers (3)

dhc
dhc

Reputation: 657

<table style="border-collapse:collapse;padding:0;margin:0;">

This will probably be the best you can get here... there's still a bit of a visual discontinuity as it looks as if the border is drawn starting with each cell (so how these are joined depends on where the dotted line ends on the previous cell. You can also experiment with <tr style="border-bottom: 1px dotted #000;"> (and leave off the styles on the <td>)... although it looks like the same result.

Upvotes: 0

Verhaeren
Verhaeren

Reputation: 1661

<table cellspacing="0">

Should make both dotted lines continuous. Yet, the way a dot is painted by the browser makes look the last dot slightly bigger than the rest. That happens because the last dot of the first dotted column is right next to the first dot of the second dotted column. In simple words, the dotted line does not end and does not start with the space between dots but with a dot.

Upvotes: 0

Prabu
Prabu

Reputation: 4187

Yes this can be done by using the following CSS property: border-collapse: collapse;

Here is JSFiddle that demonstrates this: http://jsfiddle.net/pwee167/5wo2yyam/2/

It should look like the image below:

enter image description here

Upvotes: 2

Related Questions