html - 我可以缩短表格边框的长度吗？

Question

我border-right在一张桌子上，我希望它从顶部和底部短几个像素，最好是 80-90% 的高度，<td>因为桌子不会保持不变。

像这样：

这可能吗？

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

小提琴

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 小提琴演示。

要在电子邮件客户端中使用它，不幸的是需要一个嵌套元素（考虑到电子邮件客户端的可怕原始能力，即使是现在）。因此，以下 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 小提琴演示。

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

可以接受额外的标记吗？

小提琴

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