打印宽 HTML 表格而不切断右侧答案

【问题标题】：Printing wide HTML tables without cutting off the right side打印宽 HTML 表格而不切断右侧
【发布时间】：2014-04-25 15:12:47
【问题描述】：

我知道这个问题已经在这里问了很多次了，但我还没有找到专门解决我的问题的答案。我有一张要打印的表格，它有 16 列宽。当然，右侧只是在每个浏览器中切断。我试图找出一种方法来防止这种情况发生。底部是样表，试打印，右侧切掉。不幸的是，我无法执行以下选项：

强制横向模式
使用word-break: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>

【问题讨论】：

“理想情况下，我只希望表格占据所需的宽度，如果内容过多，则正常包装，以便单词中的字母保持在一起。 " 默认情况下，这不是已经发生了吗？可以截图吗？
添加了截图。顶部是 HTML 视图，底部是 Chrome 的打印友好视图。
我猜你必须在你的 CSS 中混合使用 &nbsp;、white-space:nowrap; 和 table {max-width:800px;} 在你的 @media print CSS 中。网页不是为打印而设计的，但如果必须打印，则需要对其进行调整，使其看起来（有点）OK。
我应该在哪里使用 &nbsp？我应该把 white-space 属性放在 td 表的什么位置？

标签： html css printing

【解决方案1】：

您可以使用视口的强大功能。查看Here获取信息

@media print 的表格样式需要像这样

table{
    font-size:1vw;
}

FIDDLE - DEMO PAGE FOR FIDDLE

【讨论】：

IE10 仍然会切断右侧（甚至比没有视口更糟糕），并且在 Chrome 中表格非常小，无论是在打印预览模式下。
对我来说，表格刚刚被切断，文字太小了