如何添加虛線或添加填充到 td 邊框

Question

下圖已經接近我正在尋找的解決方案（請參閱我的代碼筆）。 唯一缺少的是<tbody>或<thead>的輪廓邊框與<td>的邊框之間的填充/間隙

問題

• 如果您必須創建類似於上圖的內容，您會采用什么方法？
• 我怎樣才能使虛線在 td (/ tr) 的邊界與 tr 或 tbody 或表格的輪廓之間有一些間隙？

代碼

你可以看看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. 首先，給你想要給空間一個唯一的元素 class （例如.spaced ）。

<td class="spaced sgn" colspan="3"> &nbsp; </td>

2. 然后，給它一個relative值 position，這樣::before和::after就相對於它定位：

.spaced {
  position: relative;
}

3. 將::before和::after添加為您想要的width作為空間，並分別向左和向右添加 position：

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

.spaced::before {
  left: 0;
}

.spaced::after {
  right: 0;
}

代碼筆： https://codepen.io/moaaz_bs/pen/xxPJoQL?editors=1100

Answer 2

如果您必須創建類似於上圖的內容，您會采用什么方法？

CSS 偽元素非常適合這個用例。

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

您可以根據自己的喜好進行調整，我無法弄清楚讓它工作的寬度，但我相信您可以。