如何向 td 边框添加虚线或添加内边距

Question

下图已经接近我正在寻找的解决方案（请参阅我的codepen）。唯一缺少的是 或 的轮廓边框与 的边框之间的填充/间隙;

问题

• 如果您必须创建类似于上图的内容，您会采取什么方法？
• 我怎样才能实现虚线在 td (/ tr) 的边框与 tr 或 tbody 或 table 的轮廓之间有一些间隙？

代码

您可以查看codepen 上的代码。我的CSS方法是这样的

table {  width: 100%; }
/** outline: 0.5pt solid; outline-color: black; border-spacing: .2em 0em; **/

thead, tbody { outline: 0.5pt solid; outline-color: black; }

th.sgn { border-bottom: 1pt dotted blue; padding-top: 1ex;}    
td.sgn { border-bottom: 1pt dotted blue; padding-top: 1ex;}  

<table>
       <colgroup>
         <col width="20%">
         <col width="35%">                    
         <col width="15%">
         <col width="30%">                    
    </colgroup>
    <thead>
       <tr>
            <th>Werkzeugnr:</th>
            <th class="sgn"> &nbsp; </th>
            <th>Index</td><th class="sgn"></th>
       </tr>                            
       <tr class="sml">
            <th colspan="4"> &nbsp; </th>
       </tr>                            
    </thead>
    <tbody>
        <tr><th colspan="4"><h3>Bitte ausfüllen und abheften!</h3></th></tr>
    </tbody>
    <tbody>                                                
       <tr>
         <td>Einbaudatum:</td><td class="sgn"> &nbsp; </td>
         <td>Name</td><td class="sgn"> &nbsp;</td>
       </tr>
       <tr><td>Anlaufprobleme:</td><td><input type="checkbox"></td><td colspan="2">Bitte Grund angeben</td>
       </tr>
    </tbody>    
</table>

Answer 1

我将使用 ::before 和 ::after 伪类来实现该间距。

1. 首先，为想要赋予空间的元素指定一个唯一的类（例如.spaced）。

<td class="spaced sgn" colspan="3">   </td>

2. 然后，给它一个相对位置，以便 ::before 和 ::after 相对于它定位：

.spaced {
  position: relative;
}

3. 添加 ::before< /code> 和 ::after 与您想要的 width 作为空格，并将它们分别定位到左侧和右侧：

.spaced::before,
.spaced::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: white;
  bottom: -0.5rem;
}

.spaced::before {
  left: 0;
}

.spaced::after {
  right: 0;
}

CodePen: https://codepen.io/moaaz_bs/pen/xxPJoQL?editors=1100

Answer 2

如果您必须创建类似于上图的内容，您会采取什么方法？

CSS 伪元素非常适合此用例。

.sgn::after {
  content: '';
  position: absolute;
  border-bottom: 2px dotted blue;
  width: 20%;
}

您可以根据自己的喜好进行调整，我无法弄清楚要使其发挥作用的宽度，但我相信您能够做到。