當我打印文檔時，我的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

我會建議嘗試添加box-sizing: border-box;到.initial-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>