CODEWITHSUNDEEP
htmlcssprinting
user1795832
user1795832

Reputation: 2160

Printing wide HTML tables without cutting off the right side

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:

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 View

Print View

Upvotes: 12

Views: 11598

Answers (2)

ahmed khan
ahmed khan

Reputation: 35

You can give custom with to table by changing table layout to fixed.

table{
    table-layout: fixed;
    width: 100%;
}

Upvotes: 0

Batu.Khan
Batu.Khan

Reputation: 3065

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;
}

FIDDLE - DEMO PAGE FOR FIDDLE

Upvotes: 9

Related Questions