Can I shorten the length of a table border? [duplicate] - html

Question

This question already has answers here:
Border Height on CSS
(12 answers)
Closed 9 years ago.
I have border-right on a table and I would like it to be a few pixels short from the top and bottom, preferably 80-90% height of the <td> as the table won't stay the same.
Like this:
Is this possible to do?
table{
border-right: 1px solid #f00;
}
Fiddle

Answer 1

This isn't possible, as you describe it, as the border of an element extends (by definition) around the full border. You can, however, fake it to some extent using nested elements or with CSS-generated content.
For example, with the following HTML:
<table>
<tbody>
<tr>
<td>text in cell</td>
</tr>
</tbody>
</table>
And the following CSS:
td {
border: 2px solid #000;
/* change the border-color to disguise the presence of the actual border
left as #000 here, to show where the fake 'border' sits in relation to
the actual border-right */
padding: 0.5em;
position: relative;
}
td::after {
content: '';
background-color: #f00;
position: absolute;
left: 100%;
top: 3px;
bottom: 3px;
width: 2px;
}
JS Fiddle demo.
For this to be used in an email client, unfortunately a nested element is required (given the hideously primitive capacities of email clients, even now). So, the following HTML:
<table>
<tbody>
<tr>
<td>text in cell<div></div></td>
</tr>
</tbody>
</table>
And CSS should work:
td {
border: 2px solid #000;
padding: 0.5em;
position: relative;
}
td div {
background-color: #f00;
position: absolute;
left: 100%;
top: 3px;
bottom: 3px;
width: 2px;
}
JS Fiddle demo.

Answer 2

You can do it with a pseudo-element:
table {
position: relative;
}
table:after {
position: absolute;
border-right: 1px solid #f00;
content: "";
top: 5%;
bottom: 5%;
right: -1px;
}
Example: http://jsfiddle.net/hY6Te/11/

Answer 3

Is additional markup acceptable?
Fiddle
<div id="wrapper">
<table width="200" height="100" bgcolor="#eee0e0">
<tr>
<td>TEXT</td>
</tr>
</table>
</div>
table{
border-right: 1px solid #f00;
}
#wrapper {
background: #eee0e0;
padding: 20px 0;
display: table; /* necessary for shirnk wrapping (inline-block would also work)
}