文書を印刷すると、divの境界線が途切れる

Question

従業員がHTMLとCSSを使用して頭文字を付けるセクションを作成しています。なぜ私のinitial-boxの境界線が切れているのか分かりません。ここで

は、結果の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>

ここ

されている

Answer 1

私は身長に含ま境界線の幅を持つように .initial-boxに box-sizing: border-box;を追加しようとすることをお勧め

幅の設定

#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>