打印宽的HTML表而不切掉右侧

Question

I know this question has been on here plenty of times, but I haven't found an answer that specifically addresses my question. 我知道这个问题已经出现很多次了，但是我还没有找到一个专门解决我的问题的答案。 I have a table that I am trying to print that is 16 columns wide. 我有一张要打印的表格，该表格宽16列。 Of course, the right side just cuts off in every browser. 当然，右侧在所有浏览器中都会被截断。 I am trying to figure out a way to prevent that from happening. 我正在尝试找出一种防止这种情况发生的方法。 At the bottom is a sample table, try printing it and the right side cuts off. 底部是示例表，请尝试打印该表，然后将右侧切掉。 Here are options that unfortunately I can't do: 不幸的是，以下是我无法执行的选项：

Force landscape mode 强制横向模式
Using word-break:break-all . 使用word-break:break-all 。 It just isn't nice looking 看起来不好看

Ideally I would just want the table to take up as much width as it needs, and if there is too much content then just wrap it normally so the letters in the words stay together. 理想情况下，我只希望表格占用所需的宽度，如果内容过多，则通常将其包装起来，以便单词中的字母保持在一起。

<!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视图

列印检视

Answer 1

You can use the power of viewport. 您可以使用视口的功能。 Check Here for info 在这里查看信息

Your table style needs to be like this for @media print 您的表格样式需要像这样@media print

table{
    font-size:1vw;
}

FIDDLE - DEMO PAGE FOR FIDDLE FIDDLE- 演示页面

打印宽的HTML表而不切掉右侧

问题描述

1 个解决方案

解决方案1
7 2014-04-25 15:26:26

打印宽的HTML表而不切掉右侧

问题描述

1 个解决方案

解决方案1 7 2014-04-25 15:26:26

解决方案1
7 2014-04-25 15:26:26