How to add the border to a cell without miss-aligning everything?

Question

I'd like to have a right border on the bottom left cell (actually the left-most cell of the second table) without messing up the positioning of the cells on it's right...

https://jsfiddle.net/horacebury/vnng82qp/4/

The CSS is very fiddly...

.tg td{font-family:Times New Roman, sans-serif;font-size:16px;border-style:solid;border-width:0px 1px 1px 0px;border-spacing:0px;overflow:hidden;word-break:normal;background-color: #EEE;border-color: #DDD;border-top: none !important;text-align: right; vertical-align: top; margin: 0px 0px 0px 0px; }
.tg .tg-yw4l{ width: 145px; padding: 4px 4px 4px 0px; }
.tg .tg-yw4g{ width: 49px; padding: 4px 0px 4px 0px; border-width: 0px 0px 1px 1px; }

Answer 1

I couldn't find a solution using border or box-sizing. You can do it using a pseudoelement though.

note Because the cell next to it has overflow: hidden, the pseudoelement has to be positioned relative to the table, and not the cell.

jsfiddle

.tg {
  position: relative;
}

.tg::after {
  position: absolute;
  content: '';
  height: 26px;
  top: 0;
  left: 50px;
  background: red;
  width: 1px;
}

update

Another way to do this would be to target the affected cell to the right.

.tg .tg-yw4g {
  width: 49px;
  padding: 4px 0px 4px 0px;
  border-width: 0px 0px 1px 1px;
  border-right: 1px solid red;
}

.tg .tg-yw4g + td {
  width: 144px;
}

jsfiddle