Question

我知道这个问题已经在这里发过很多次，但我还没有找到专门解决我问题的答案。我有一张桌子，我正在尝试打印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 View

Print View

Answer 1

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

对于@media print

，您的表格样式必须如此

table{
    font-size:1vw;
}

FIDDLE - DEMO PAGE FOR FIDDLE

打印宽HTML表而不切断右侧

1 个答案: