Printing wide HTML tables without cutting off the right side
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. 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. 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>
1 answers
solution1
7 2014-04-25 15:26:26
You can use the power of viewport. Check Here for info
Your table style needs to be like this for @media print
table{
font-size:1vw;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.