打印宽HTML表而不切断右侧_Html_Css_Printing

打印宽HTML表而不切断右侧

html css printing

打印宽HTML表而不切断右侧,html,css,printing,Html,Css,Printing,我知道这个问题已经在这里讨论过很多次了，但我还没有找到一个具体解决我问题的答案。我有一个表，我正试图打印16列宽。当然，每个浏览器的右侧都会被截断。我正试图找出一种方法来防止这种情况发生。底部是一个示例表，请尝试打印它，右侧将被截断。不幸的是，以下是我无法做到的选项：部队横向模式使用wordbreak:break all。只是不好看理想情况下，我只想让表格占据所需的宽度，如果内容太多，那么就正常地将其包装起来，以便单词中的字母保持在一起 <!DOCTYPE html> &l

我知道这个问题已经在这里讨论过很多次了，但我还没有找到一个具体解决我问题的答案。我有一个表，我正试图打印16列宽。当然，每个浏览器的右侧都会被截断。我正试图找出一种方法来防止这种情况发生。底部是一个示例表，请尝试打印它，右侧将被截断。不幸的是，以下是我无法做到的选项：

部队横向模式
使用
```
wordbreak:break all
```
。只是不好看

理想情况下，我只想让表格占据所需的宽度，如果内容太多，那么就正常地将其包装起来，以便单词中的字母保持在一起

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
  font-size: 12pt;
  font-family: Garamond, Serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 15px;
  font-size: 1.2em;
}
td, th {
  padding: 2px 2px 2px 5px;
  border: 1px solid #000000;
}
tr.tableTitle {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  background: #d0d0d0;
}

thead tr {
  font-weight: bold;
  background: #f0f0f0;
  text-align: center;
}
button.expander {
  border: 1px solid black;
  border-radius: 5px;
  color: black;
  font-family: Verdana, Serif;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  float: left;
  margin: 0px 5px 10px 0px;
  background: #ffffff;
} 
@media print {
  button.expander{
    display: none;
    margin: 0px;
  }
}
</style>
</head>
<body>

<div class="section">
<button class="expander">-</button>
<table>
<thead>
<tr class="tableTitle"><th colspan="16">Table Header</th></tr>
<tr>
<th>Column A</th>
<th>Column B Column B Column B</th>
<th>Column C</th>
<th>Column D</th>
<th>Column E</th>
<th>Column F</th>
<th>Column G Column G</th>
<th>Column H</th>
<th>Column I</th>
<th>Column J</th>
<th>Column K</th>
<th>Column L</th>
<th>Column M</th>
<th>Column N</th>
<th>Column O</th>
<th>Column P</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column text here Column text here </td>
<td>Column text here Column text here</td>
<td>Column text here Column text here</td>
<td>Column text here Column text here</td>
<td>Column text here Column text here</td>
<td>Column text here Column text here</td>
<td>Column text here Column text here</td>
<td>Column text here Column text here</td>
<td>Column text here Column text here</td>
<td>Column text here Column text here</td>
<td>Column text here Column text here</td>
<td>Column text here Column text here</td>
<td>Column text here Column text here</td>
<td>Column text here Column text here</td>
<td>Column text here Column text here</td>
<td>Column text here Column text here</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>


身体{
字号：12号；
字体系列：Garamond，衬线；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
边缘底部：15px；
字体大小：1.2米；
}
td，th{
填充：2×2×2×5×2；
边框：1px实心#000000；
}
书名{
字体大小：1.2米；
字体大小：粗体；
文本对齐：居中；
背景：#d0；
}
thead tr{
字体大小：粗体；
背景：#f0；
文本对齐：居中；
}
按钮扩展器{
边框：1px纯黑；
边界半径：5px；
颜色：黑色；
字体系列：Verdana，衬线；
字号：1em；
字体大小：粗体；
光标：指针；
浮动：左；
保证金：0px 5px 10px 0px；
背景：#ffffff；
} 
@媒体印刷品{
按钮扩展器{
显示：无；
边际：0px；
}
}
-
表头
A列
B栏B栏B栏
C列
D列
E列
F列
G列G列
H列
第一栏
第J列
K列
L列
M列
第N列
O列
P列
此处为列文本此处为列文本
此处为列文本此处为列文本
此处为列文本此处为列文本
此处为列文本此处为列文本
此处为列文本此处为列文本
此处为列文本此处为列文本
此处为列文本此处为列文本
此处为列文本此处为列文本
此处为列文本此处为列文本
此处为列文本此处为列文本
此处为列文本此处为列文本
此处为列文本此处为列文本
此处为列文本此处为列文本
此处为列文本此处为列文本
此处为列文本此处为列文本
此处为列文本此处为列文本

您可以使用viewport的强大功能。查看信息

对于@media print，您的表格样式需要如下所示

table{
    font-size:1vw;
}

“理想情况下，我只希望表格占据所需的宽度，如果内容太多，则只需正常包装，以便单词中的字母保持在一起。”默认情况下，这不是已经发生了吗？你能做一个截图吗？添加了截图。顶部是HTML视图，底部是来自Chrome的打印友好视图。我猜您必须混合使用

，

空白：nowrap和表格{max width:800px；}
在@media print
CSS上。网页不是为了打印而制作的，但如果必须打印，则需要对其进行调整，使其看起来（有点）正常。我在哪里使用？在td表格上，我应该把空白属性放在哪里？IE10仍然会切断右边（甚至比没有视口更糟糕），在Chrome中，表格非常小，都是在打印预览模式下。对我来说，表格刚刚被切断，文本太小了