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

时间:2017-06-12 18:59:34

标签: html css printing

我正在为员工创建一个部分,使用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>
&#13;
&#13;
&#13;

结果如下 Here is the result

1 个答案:

答案 0 :(得分: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>