Why does my table have different borders?

[certificates]

I’ve not been around for a while although I haven’t forgotten the help that available here>

I’m not quite sure why some of the columns in my table have different borders than the rest.

www.c5d.co.uk/1861at1.php

Some of them have bold borders, and some standard if that makes sense.

Other than border-collapse: collapse and all the TDs being specified as 1 px there doesn’t seem to be anything else specified by the CSS

.thecensus1861{
	width:100%;
	margin-top:25px;
	text-align:left;
	border-collapse:collapse;
	font-size:small;
}

.thecensus1861 td {
	border:1px solid #000;
	white-space:nowrap;
}

Thanks

[DaveMaxwell]

Where do you see different borders? They all look the same to me on quick glance…

[certificates]

To the left of the columns headed:

Inhabited:

Relation to head of Family

Age of Males and

Where born.

All these seem to be normal whilst the remainder appear bold

[DaveMaxwell]

What browser? It looks normal to me unless I increase the view zoom.

[certificates]

Edge and Opera.

It’s fine on Firefox. Not tried anything else. On Opera, one of the bottom edge lines is bold. The first rwo.

[DaveMaxwell]

Well, like I said, I don’t see it (using Chrome but Edge will display the same since they use the same rendering engine) unless I’m zoomed in. All bets are off if you zoom in

There are ways around it to ensure it’s consistent (using border: separate; with a border-spacing: 0px;) but that’s going to bring it’s own challenges because you’re going to have to use first-of-type/last-of-type properties to ensure the outside border gets set properly.

[certificates]

Thanks. I may give this a miss. All my screen is at 100% . As you say if you zoom in, or out for that matter. It goes awry.

Thanks for looking.

[DaveMaxwell]

If you use the separate and 0px, you’d need to add

.thecensus1861 table {
    border-collapse: separate;  
    border-spacing: 0;
}
.thecensus1861 tr:first-child td {
    border-top: 2px solid black;
}
.thecensus1861 tr:last-child td {
    border-bottom: 2px solid black;
}
.thecensus1861 tr td:first-child {
    border-left: 2px solid black;
}
.thecensus1861 tr td:last-child {
    border-right: 2px solid black;
}

You’ll end up with a slightly thicker border, but it’ll be consistent the whole way through no matter the zoom.

[certificates]

@DaveMaxwell

}
.thecensus1861 tr:first-child td {
    border-top: 2px solid black;
}
.thecensus1861 tr:last-child td {
    border-bottom: 2px solid black;
}
.thecensus1861 tr td:first-child {
    border-left: 2px solid black;
}
.thecensus1861 tr td:last-child {
    border-right: 2px solid black;
}

Thanks.

Will give it a shot