8
काटने के बिना विस्तृत HTML टेबल प्रिंट करना मुझे पता है कि यह प्रश्न यहां कई बार रहा है, लेकिन मुझे ऐसा कोई जवाब नहीं मिला है जो विशेष रूप से मेरे प्रश्न को संबोधित करता है। मेरे पास एक सारणी है जिसे मैं प्रिंट करने की कोशिश कर रहा हूं जो 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>
* "आदर्श रूप में मैं सिर्फ तालिका के रूप में शुरू करने के लिए चाहते हो जाएगा जितनी चौड़ाई उतनी चौड़ाई है, और यदि बहुत अधिक सामग्री है तो बस इसे सामान्य रूप से लपेटें ताकि शब्दों में अक्षर एक साथ रहें। "* क्या यह पहले से ही नहीं होता है, डिफ़ॉल्ट रूप से? क्या आप एक स्क्रीनशॉट बना सकते हैं? – TKrugg
जोड़ा गया स्क्रीनशॉट। शीर्ष HTML दृश्य है, नीचे क्रोम से प्रिंट अनुकूल दृश्य है। – user1795832
मुझे लगता है कि आपको अपने '@media प्रिंट' सीएसएस पर ' ', 'व्हाइट-स्पेस: नाओपैप;' में अपने सीएसएस और 'टेबल {अधिकतम-चौड़ाई: 800px;}' के मिश्रण का उपयोग करना होगा। वेब पेज मुद्रित नहीं किए जाते हैं, लेकिन यदि आपको करना है, तो आपको इसे ट्विक करने की आवश्यकता है ताकि यह ठीक दिखता है (तरह)। – morespace54