'How to add a dotted line or add padding to td border

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>

table with dotted lines current state

Questions

  • What approach would you take if you had to create something that looks like the image above?
  • How can i achieve that the dotted lines have some gap between the border of the td (/ tr) and the outline of either tr or tbody or table?

Code

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"> &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>
htmlcssoutlineborder-spacing


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zach Jensz

Related Questions