我可以缩短表格边框的长度吗？ [复制]答案

【问题标题】：Can I shorten the length of a table border? [duplicate]我可以缩短表格边框的长度吗？ [复制]
【发布时间】：2013-08-27 11:41:27
【问题描述】：

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

像这样：

这样可以吗？

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

Fiddle

【问题讨论】：

标签： html css border css-tables

【解决方案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.

【讨论】：

那么最好和最干净的方法是什么？
@Adsy：看到更新的答案，在发布解释后正在处理这个问题。 =)
啊，伙计，这段代码在浏览器视图中完美运行，但是当我在 Outlook 中查看它时它消失了！ :(
啊，如果您在电子邮件客户端中执行此操作，那么恐怕您需要退回到使用嵌套元素。查看更新后的答案。
就是这样 :) 感谢您的所有工作！

【解决方案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/

【讨论】：

如果您将table:after 的样式更改为top: 5%; bottom: 5%; right: 0;，那么您将得到操作人员想要的内容； +1
谢谢@AlexShesterov

【解决方案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)
}

【讨论】：