The below image is already close to the solution i am looking for (see my codepen ). The only thing that is missing is a padding / gap between the outline border of <tbody>
or <thead>
and the border of the <td>
You can take a look at the code on codepen . My CSS approach is this
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"> </th> <th>Index</td><th class="sgn"></th> </tr> <tr class="sml"> <th colspan="4"> </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"> </td> <td>Name</td><td class="sgn">  :</td> </tr> <tr><td>Anlaufprobleme:</td><td><input type="checkbox"></td><td colspan="2">Bitte Grund angeben</td> </tr> </tbody> </table>
I would achieve that spacing with ::before
and ::after
pseudo classes.
.spaced
).<td class="spaced sgn" colspan="3"> </td>
relative
position so ::before
and ::after
get positioned relative to it:.spaced {
position: relative;
}
::before
and ::after
with the width
you want as space, and position them to left and right respectively:.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
What approach would you take if you had to create something that looks like the image above?
CSS Pseudo elements are perfect for this use case.
.sgn::after {
content: '';
position: absolute;
border-bottom: 2px dotted blue;
width: 20%;
}
You can adjust this to your liking, I couldn't figure out what width to get it to work but I'm sure you will be able to.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.