打印寬的HTML表而不切掉右側

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視圖

列印檢視

Answer 1

您可以使用視口的功能。 在這里查看信息

您的表格樣式需要像這樣@media print

table{
    font-size:1vw;
}

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