Safari bug in table with border dotted

Question

This is in Safari and Chrome:

CSS:

TABLE {
    width: 100%;
    clear: both;
    border: 0px;
    border-collapse: collapse;
}
TABLE TH,
TABLE TD {
    padding: 10px;
    text-align: center;
    border: 1px dotted #898989;
}

score 1 · Answer 1 · edited May 23 '17 at 10:30

1

Add

table th {
    border-bottom: none;
}

But for more complex layouts where you can't disable border this easily, you could consider using the separate border model as answered here because the repetitive pixel pattern of dotted could get an offset (depending on the starting position) which could result in a solid line between adjacent cells.

edited May 23 '17 at 10:30

Community

1
1

answered Jun 18 '11 at 08:22

NGLN

43,011
8
105
200

Thanks, i'm remove border-collapse, add cellpadding and cellspacing (both 0), add border-right and bottom for each td, border-left for first cells each tr and border-top for table. That's work! :) – demx Jun 18 '11 at 09:16
@demx I assume you use :first-child for that. Remind that the first `td` in a `tr` may not be situated in the first column if you use multiple rowspan. – NGLN Jun 18 '11 at 15:33

Safari bug in table with border dotted

1 Answers1