打印文档时，我的div边界被切断了

Question

我正在为员工创建一个部分，使用HTML和CSS来填写首字母。我无法弄清楚为什么initial-box的边界会被切断。

这是html

＆＃13;

＆＃13;

#initials {
  padding: 0px;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

结果如下

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>