Question

我需要在TD标签内创建一个内嵌边框，该边框始终距边缘4个像素。 IE11中不支持“outline-offset”，所以我试图创建一个SVG并将其设置为TD的背景图像，但是我无法将右边和底部的4像素填充保持为SVG宽度需要一个数字或百分比：

有关如何使用svg文件在SVG中解决此问题的任何想法？或者也许另一种技术？ “viewbox”有助于缩放，但是当在列宽变化时调整TD的大小时，我还没有找到保持4像素填充的方法。

我试图在不将DIV标签插入TD并设置其边框的情况下执行此操作。只是TD中的纯CSS而不调整DOM。

非常感谢：）

inline cell border

Answer 1

您可以使用::before伪元素执行此操作。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: