html - Border Height on CSS

Question

I have a table TD and on the right of it I want to add a 1 pixel border, so I've done this:

table td {
    border-right:1px solid #000;
}

It works fine but the problem is that the border's height takes the total TD's height.

Is there a way to set the height of the border?

Answer 1

I have another possibility. This is of course a "newer" technique, but for my projects works sufficient.

It only works if you need one or two borders. I've never done it with 4 borders... and to be honest, I don't know the answer for that yet.

.your-item {
  position: relative;
}

.your-item:after {
  content: '';
  height: 100%; //You can change this if you want smaller/bigger borders
  width: 1px;

  position: absolute;
  right: 0;
  top: 0; // If you want to set a smaller height and center it, change this value

  background-color: #000000; // The color of your border
}

I hope this helps you too, as for me, this is an easy workaround.