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

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