如何在不对齐所有内容的情况下将边框添加到单元格？

Question

我想在左下角的单元格（实际上是第二个 table 最左边的单元格）上有一个右边框，而不会弄乱右侧单元格的位置...

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

我找不到使用边框或 box-sizing 的解决方案。不过，您可以使用伪元素来做到这一点。

注意因为它旁边的单元格有overflow: hidden，所以伪元素必须相对于table而不是单元格定位。

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

如何在不对齐所有内容的情况下将边框添加到单元格？

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

css

html-table

jsfiddle