My table's inner borders have a dotted appearance. How do I fix it?

[nad.chel]

My table’s internal borders have a dotted appearance. Do you think I can fix it?

        table {
            border: 3px solid black;
        }

        thead {
            background-color: slategray;
        }

        td {
            border-top: 3px solid black;
        }

I would like my table to look like this

How can I achieve this result?

[jameskeezer]

Try using the property and value: border-collapse: collapse; on your table, th and td. Then go from there.

You could also just make the have a border-top, instead of each td.

Let me know if that works for you.

[nad.chel]

But if I collapse the borders, won’t the heading cells merge together? I like them being separated with those white vertical strokes

[jameskeezer]

They sure will! There is a solution if you play around with it.

[nad.chel]

Thank you! But the borders are not equal in width in your example. The lower inner border is wider. Why is that?

My solution is this. I didn’t get the part about display: block so I just gave the th elements those tiny white borders. Though I still have the same issue with inner borders not properly collapsed so one is bolder than the other

table {
    border: 3px solid black;
    border-collapse: collapse;
}

thead {
    background-color: slategray;
}

tr {
    border-top: 1px solid black;
}

th {
    border: 2px solid white;
}

It has something to do with my crappy browser I guess 'cause in Google Chrome I don’t have such a problem