8
So che questa domanda è stata qui un sacco di volte, ma non ho trovato una risposta che risolva in modo specifico la mia domanda. Ho un tavolo che sto cercando di stampare che è largo 16 colonne. Certo, il lato destro si interrompe in ogni browser. Sto cercando di capire un modo per evitare che ciò accada. In fondo c'è una tabella di esempio, prova a stamparla e il lato destro si spegne. Qui ci sono le opzioni che purtroppo non posso fare: modalità orizzontaleStampa di larghe tabelle HTML senza tagliare la parte destra
- Forza
- Utilizzando
word-break:break-all. Semplicemente non è bello
Idealmente vorrei solo che il tavolo occupasse tutta la larghezza di cui ha bisogno, e se c'è troppo contenuto, basta avvolgerlo normalmente in modo che le lettere nelle parole rimangano insieme .
<!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>
* "Idealmente vorrei solo desidera che la tabella di prendere come larghezza di cui ha bisogno, e se c'è troppo contenuto, basta avvolgerlo normalmente in modo che le lettere nelle parole rimangano insieme. "* Non è quello che succede già, di default? Puoi fare uno screenshot? – TKrugg
Aggiunto screenshot. La parte superiore è la visualizzazione HTML, la parte inferiore è la visualizzazione stampabile da Chrome. – user1795832
Immagino che dovresti usare un mix di ' ', 'white-space: nowrap;' nel tuo CSS e 'table {max-width: 800px;}' sul tuo '@media print' CSS. Le pagine Web non sono fatte per essere stampate, ma se è necessario, allora è necessario modificarlo in modo che appaia (un po ') OK. – morespace54