Meine div Grenzen werden abgeschnitten, wenn ich das Dokument

Question

Ich erstelle einen Abschnitt für Mitarbeiter ihre Initialen mit HTML und CSS setzen. Ich kann nicht herausfinden, warum die Grenzen meiner initial-box's abgeschnitten werden. Hier

ist die html

#initials { 
 
    padding: 0px; 
 
} 
 

 
.initial-box { 
 
    width: 40px; 
 
    height: 30px; 
 
    border: 1px solid black; 
 
}

<div id="initials"> 
 
    <table id="initial-table"> 
 
    <tr class="initial-labels"> 
 
     <td>1st shift</td> 
 
     <td>2nd shift</td> 
 
     <td>3rd shift</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div class="initial-box"></div> 
 
     </td> 
 
     <td> 
 
     <div class="initial-box"></div> 
 
     </td> 
 
     <td> 
 
     <div class="initial-box"></div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

Hier wird das Ergebnis

Answer 1

würde ich vorschlagen, um zu versuchen, box-sizing: border-box;-.initial-box hinzuzufügen, um die Rahmenbreite in der Höhe aufgenommen zu haben und Breiteneinstellungen.

#initials { 
 
    padding: 0px; 
 
} 
 

 
.initial-box { 
 
    box-sizing: border-box; 
 
    width: 40px; 
 
    height: 30px; 
 
    border: 1px solid black; 
 
}

<div id="initials"> 
 
    <table id="initial-table"> 
 
    <tr class="initial-labels"> 
 
     <td>1st shift</td> 
 
     <td>2nd shift</td> 
 
     <td>3rd shift</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div class="initial-box"></div> 
 
     </td> 
 
     <td> 
 
     <div class="initial-box"></div> 
 
     </td> 
 
     <td> 
 
     <div class="initial-box"></div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>