我可以缩短桌边的长度吗？

Question

我在桌子上有border-right，我希望它距离顶部和底部几个像素，最好是<td>的80-90％高度，因为桌子不会停留同样的。

像这样：

这可能吗？

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

Fiddle

Answer 1

正如您所描述的那样，这是不可能的，因为元素的border在整个边界周围延伸（按照定义）。但是，您可以使用嵌套元素或CSS生成的内容在某种程度上伪造它。

例如，使用以下HTML：

<table>
    <tbody>
        <tr>
            <td>text in cell</td>
        </tr>
    </tbody>
</table>

以下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

为了在电子邮件客户端中使用，不幸的是需要一个嵌套元素（考虑到电子邮件客户端的隐藏原始容量，即使是现在）。那么，以下HTML：

<table>
    <tbody>
        <tr>
            <td>text in cell<div></div></td>
        </tr>
    </tbody>
</table>

CSS应该有效：

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

您可以使用伪元素：

table {
    position: relative;
}

table:after {
    position: absolute;
    border-right: 1px solid #f00; 
    content: "";
    top: 5%;
    bottom: 5%;
    right: -1px;
}

示例：http://jsfiddle.net/hY6Te/11/

Answer 3

是否可以接受其他标记？

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)
}