Search code examples
csshtml-tablehighlight

CSS border-width thrashing

I have been thrashing like crazy -- literally days -- trying to highlight certain parts of my table with thicker borders.

I have a 12-row x 3-column table that has a header row and two "label columns" making it a 13-row x 5-column table altogether.

It looks like this:

my 13x5 table

I would like for all the borders to be 1px but I would like to highlight the 12 3x1 "boxes" by making their borders, say, 3x. I have shown the borders of those "boxes" in red to better illustrate their location, but I would like them to be black borders. I would also like to make the outside border of the table 3px and maybe the horizontal borders that run the full width of the table.

I have been trying to use the :nth-child(3n+m) selector to facilitate this:

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 2px;
}
tr: nth-child(3n+2) {
  border-style: solid;
  border-width: 3px 3px 1px 3px;
}
tr: nth-child(3n+3) {
  border-style: solid;
  border-width: 1px 3px 1px 3px;
}
tr: nth-child(3n+4) {
  border-style: solid;
  border-width: 1px 3px 3px 3px;
}

My plan was to make

  1. the 3n+2 elements heavy except on the bottom,
  2. the 3n+3 elements heavy on the left and right, and
  3. the 3n+4 elements heavy except on the top

Right now, none of the borders are getting 3px :-(, but last night, the correct horizontal borders were getting 3px, but the only vertical borders that were 3px were the far left and far right.

I thought I might be able to do some column elements and get the vertical borders, but I need to crawl before I can walk here.

Can you override previous border-width assignments with subsequent assignments?

Thank you in advance.

Solution

  • I've created a fiddle here https://jsfiddle.net/a7o6uw0f/

    What it does:

    • it operates on the td instead of the tr
    • it separates table header from body.
    • it adapts to the fact that sometimes (rowspan=3) a td might be a first element and otherwise not

    Uncomment the border-color parts to see how the colors work on the individual cell borders.