如何使用SVG创建与边缘保持4像素距离的内联边框

Question

我需要在始终距离边缘4个像素的TD标签内创建内联边框。 “轮廓偏移量”在IE11中不受支持，所以我试图创建一个SVG并将其设置为TD的背景图像，但我无法将4像素填充保留在右侧和底部SVG宽度需要一个数字或百分比：

如何使用SVG文件SVG把这事办成任何想法？或者也许是另一种技术“viewbox”有助于缩放，但我还没有找到一种方法来保持4像素填充时，TD的列宽变化的大小。

我试图做到这一点，没有插入一个DIV标签到TD并设置它的边界。没有调整DOM，只需要纯粹的CSS就可以了。

非常感谢:)

inline cell border

Answer 1

你可以用::before伪元素做到这一点。

td { 
 
    width: 200px; 
 
    border: solid 1px #ccc; 
 
    padding: 6px; 
 
    font-family: sans-serif; 
 
    text-align: right; 
 
    position: relative; 
 
} 
 

 
.inset-border::before { 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    top: 4px; 
 
    right: 4px; 
 
    bottom: 4px; 
 
    left: 4px; 
 
    border: solid 1px black; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td class="inset-border">7,321</td> 
 
    </tr> 
 
    </tbody> 
 
</table>