Как добавить границу в ячейку без пропущенного выравнивания?

Question

Я хотел бы иметь правую границу на нижней левой ячейке (на самом деле левая ячейки второй таблицы), не портя расположение клеток на это право ...

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

CSS-очень неудобный ...

.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

я не смог найти решение, используя рамку или окно-проклейки. Вы можете сделать это, используя псевдоэлемент.

примечание Поскольку ячейка рядом с ней имеет overflow: hidden, псевдоэлемент должен располагаться относительно таблицы, а не ячейки.

jsfiddle

.tg { 
    position: relative; 
} 

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

обновление

Другой способ сделать это будет предназначаться пораженную клетку вправо.

.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