दिलचस्प पोस्ट
कार्यवाही के नीचे छाया निकालें मौजूदा ऑब्जेक्ट इंस्टेंस के लिए एक विधि जोड़ना पूरे दस्तावेज़ में एक निश्चित प्रकार के प्रथम / nth तत्व का मिलान करना LINQ अभिव्यक्ति वाक्यविन्यास उत्सुक लोडिंग के लिए शामिल करें () के साथ कैसे काम करता है मौजूदा मानों को अधिलेखित किए बिना NSUserDefaults का उपयोग कर उपयोगकर्ता डिफ़ॉल्ट कैसे पंजीकृत करें? chrome.tabs.executeScript (): सामग्री स्क्रिप्ट का परिणाम कैसे प्राप्त करें? खोया httpd.conf फ़ाइल स्थित अपाचे क्षेत्र की तारीख को क्रोम में डुप्लिकेट में एमवीसी में एक तिथि होना चाहिए। $ (दस्तावेज़) आईफोन वेब ऐप के माध्यम से एक्सेस कैमरा एंड्रॉइड स्टूडियो 0.8.1 – फेसबुक एसडीके का उपयोग कैसे करें? स्काला एकाधिक प्रकार के पैटर्न मिलान विदेशी कुंजी बाधाओं का कारण हो सकता है चक्र या कई कैस्केड पथ? रेखा हटाएं यदि फ़ील्ड डुप्लिकेट है सॉकेट त्रुटि से पढ़ने के लिए और डेटा नहीं

मुद्रित पृष्ठों पर Google Chrome दोहराने वाले टेबल हेडर होने पर

मुझे हर तालिका के लिए दोहराया गया मेरी तालिका का हेडर होना चाहिये, लेकिन ऐसा लगता है कि Google क्रोम अच्छी तरह से टैग का समर्थन नहीं करता … क्या इसका कोई रास्ता नहीं है? मैं Google Chrome v13.0.782.215 का उपयोग कर रहा हूं।

टेबल कोड बहुत सीधा है … कुछ भी नहीं फैंसी:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css" media="all"> @page { size: landscape; margin-top: 0; margin-bottom: 1cm; margin-left: 0; margin-right: 0; } table { border: .02em solid #666; border-collapse:collapse; width:100%; } td, th { border: .02em solid #666; font-size:12px; line-height: 12px; vertical-align:middle; padding:5px; font-family:"Arial"; } th { text-align:left; font-size:12px; font-weight:bold; } h2 { margin-bottom: 0; } </style> </head> <body> <h2>Page Title</h2> <table> <thead> <tr class="row1"> <th><strong>Heading 1</strong></th> <th><strong>Heading 2</strong></th> <th><strong>Heading 3</strong></th> <th><strong>Heading 4</strong></th> <th><strong>Heading 5</strong></th> </tr> </thead> <tbody> <tr class="row2"> <td width="30">...</td> <td width="30">...</td> <td width="90">....</td> <td width="190">...</td> <td width="420">...</td> </tr> <tr class="row1"> <td width="30">...</td> <td width="30">...</td> <td width="90">....</td> <td width="190">...</td> <td width="420">...</td> </tr> .... </tbody> </table> </body> </html> 

इस में कोई अंतर्दृष्टि का स्वागत है

Solutions Collecting From Web of "मुद्रित पृष्ठों पर Google Chrome दोहराने वाले टेबल हेडर होने पर"

मेरा मानना ​​है कि यह क्रोम में एक बग है

2017-03-22 को अपडेट करें: अंत में टेबल हेडर को क्रोम में लागू किया गया है! (वास्तव में, मुझे लगता है कि उन्हें कुछ समय पहले लागू किया गया था।) इसका मतलब है कि आपको शायद अब इस समाधान की ज़रूरत नहीं है; बस एक <thead> टैग में अपने कॉलम हेडर डालें और आपको सभी सेट होने चाहिए। नीचे दी गई समाधान का उपयोग केवल तभी करें: क) आप क्रोम के क्रियान्वयन में शो-रोक वाली बग का सामना करते हैं, बी) आपको "बोनस फीचर्स" की आवश्यकता है, या सी) आपको कुछ ओडबॉल ब्राउज़र का समर्थन करने की आवश्यकता है जो अभी भी दोहरा हेडर का समर्थन नहीं करता है।


समाधान (अप्रचलित)

नीचे दिए गए कोड में मल्टी-पेज टेबल प्रिंटिंग के लिए मैंने जो सर्वोत्तम विधि पाई है उसे दर्शाता है। इसमें निम्नलिखित विशेषताएं हैं:

  • प्रत्येक पृष्ठ पर कॉलम हेडर दोहराते हैं
  • कागज़ के आकार या कितनी पंक्तियों के बारे में चिंता करने की ज़रूरत नहीं है – ब्राउज़र सभी चीजों को स्वचालित रूप से प्रबंधित करता है
  • पेज ब्रेक्स केवल पंक्तियों के बीच होते हैं
  • सेल सीमाएं हमेशा पूरी तरह से बंद होती हैं
  • यदि तालिका के ऊपर एक पेज ब्रेक होता है, तो यह एक अनाथ कैप्शन या कॉलम हेडर के पीछे नहीं छोड़ेगा, जिसमें कोई डेटा संलग्न नहीं होता (एक समस्या जो सिर्फ क्रोम तक ही सीमित नहीं है)
  • क्रोम में काम करता है! (और सफारी और ओपेरा जैसे अन्य वेबकिट-आधारित ब्राउज़र)

… और निम्न ज्ञात सीमाएं:

  • केवल 1 <thead> का समर्थन करता है (जो जाहिरा तौर पर सबसे अधिक है जिसे आप वैसे भी अनुमति देते हैं )
  • <tfoot> समर्थन नहीं करता है (हालांकि क्रोम-संगत रनिंग <tfoot> तकनीकी रूप से संभव हैं )
  • केवल शीर्ष गठबंधन <caption> का समर्थन करता है
  • तालिका में ऊपर या नीचे margin नहीं हो सकता; तालिका के ऊपर या नीचे सफेद स्थान जोड़ने के लिए, एक खाली डिवा डालें और उस पर नीचे मार्जिन सेट करें
  • ऊपरी ( border-width और line-height ) को प्रभावित करने वाले किसी भी सीएसएस आकार के मानों को px में होना चाहिए
  • स्तंभ की चौड़ाई व्यक्तिगत तालिका कोशिकाओं के लिए चौड़ाई मानों को लागू करने से निर्धारित नहीं की जा सकती; आपको या तो सेल सामग्री को स्वचालित रूप से कॉलम चौड़ाई निर्धारित करना चाहिए या यदि आवश्यक हो तो विशिष्ट चौड़ाई निर्धारित करने के लिए <col>s

  • जेएस चलने के बाद टेबल को आसानी से बदल नहीं सकता (आसानी से)

कोड

 <!DOCTYPE html> <html> <body> <table class="print t1"> <!-- Delete "t1" class to remove row numbers. --> <caption>Print-Friendly Table</caption> <thead> <tr> <th></th> <th>Column Header</th> <th>Column Header</th> <th>Multi-Line<br/>Column<br/>Header</th> </tr> </thead> <tbody> <tr> <td></td> <td>data</td> <td>Multiple<br/>lines of<br/>data</td> <td>data</td> </tr> </tbody> </table> </body> </html> <style> /* THE FOLLOWING CSS IS REQUIRED AND SHOULD NOT BE MODIFIED. */ div.fauxRow { display: inline-block; vertical-align: top; width: 100%; page-break-inside: avoid; } table.fauxRow {border-spacing: 0;} table.fauxRow > tbody > tr > td { padding: 0; overflow: hidden; } table.fauxRow > tbody > tr > td > table.print { display: inline-table; vertical-align: top; } table.fauxRow > tbody > tr > td > table.print > caption {caption-side: top;} .noBreak { float: right; width: 100%; visibility: hidden; } .noBreak:before, .noBreak:after { display: block; content: ""; } .noBreak:after {margin-top: -594mm;} .noBreak > div { display: inline-block; vertical-align: top; width:100%; page-break-inside: avoid; } table.print > tbody > tr {page-break-inside: avoid;} table.print > tbody > .metricsRow > td {border-top: none !important;} /* THE FOLLOWING CSS IS REQUIRED, but the values may be adjusted. */ /* NOTE: All size values that can affect an element's height should use the px unit! */ table.fauxRow, table.print { font-size: 16px; line-height: 20px; } /* THE FOLLOWING CSS IS OPTIONAL. */ body {counter-reset: t1;} /* Delete to remove row numbers. */ .noBreak .t1 > tbody > tr > :first-child:before {counter-increment: none;} /* Delete to remove row numbers. */ .t1 > tbody > tr > :first-child:before { /* Delete to remove row numbers. */ display: block; text-align: right; counter-increment: t1 1; content: counter(t1); } table.fauxRow, table.print { font-family: Tahoma, Verdana, Georgia; /* Try to use fonts that don't get bigger when printed. */ margin: 0 auto 0 auto; /* Delete if you don't want table to be centered. */ } table.print {border-spacing: 0;} table.print > * > tr > * { border-right: 2px solid black; border-bottom: 2px solid black; padding: 0 5px 0 5px; } table.print > * > :first-child > * {border-top: 2px solid black;} table.print > thead ~ * > :first-child > *, table.print > tbody ~ * > :first-child > * {border-top: none;} table.print > * > tr > :first-child {border-left: 2px solid black;} table.print > thead {vertical-align: bottom;} table.print > thead > .borderRow > th {border-bottom: none;} table.print > tbody {vertical-align: top;} table.print > caption {font-weight: bold;} </style> <script> (function() { // THIS FUNCTION IS NOT REQUIRED. It just adds table rows for testing purposes. var rowCount = 100 , tbod = document.querySelector("table.print > tbody") , row = tbod.rows[0]; for(; --rowCount; tbod.appendChild(row.cloneNode(true))); })(); (function() { // THIS FUNCTION IS REQUIRED. if(/Firefox|MSIE |Trident/i.test(navigator.userAgent)) var formatForPrint = function(table) { var noBreak = document.createElement("div") , noBreakTable = noBreak.appendChild(document.createElement("div")).appendChild(table.cloneNode()) , tableParent = table.parentNode , tableParts = table.children , partCount = tableParts.length , partNum = 0 , cell = table.querySelector("tbody > tr > td"); noBreak.className = "noBreak"; for(; partNum < partCount; partNum++) { if(!/tbody/i.test(tableParts[partNum].tagName)) noBreakTable.appendChild(tableParts[partNum].cloneNode(true)); } if(cell) { noBreakTable.appendChild(cell.parentNode.parentNode.cloneNode()).appendChild(cell.parentNode.cloneNode(true)); if(!table.tHead) { var borderRow = document.createElement("tr"); borderRow.appendChild(document.createElement("th")).colSpan="1000"; borderRow.className = "borderRow"; table.insertBefore(document.createElement("thead"), table.tBodies[0]).appendChild(borderRow); } } tableParent.insertBefore(document.createElement("div"), table).style.paddingTop = ".009px"; tableParent.insertBefore(noBreak, table); }; else var formatForPrint = function(table) { var tableParent = table.parentNode , cell = table.querySelector("tbody > tr > td"); if(cell) { var topFauxRow = document.createElement("table") , fauxRowTable = topFauxRow.insertRow(0).insertCell(0).appendChild(table.cloneNode()) , colgroup = fauxRowTable.appendChild(document.createElement("colgroup")) , headerHider = document.createElement("div") , metricsRow = document.createElement("tr") , cells = cell.parentNode.cells , cellNum = cells.length , colCount = 0 , tbods = table.tBodies , tbodCount = tbods.length , tbodNum = 0 , tbod = tbods[0]; for(; cellNum--; colCount += cells[cellNum].colSpan); for(cellNum = colCount; cellNum--; metricsRow.appendChild(document.createElement("td")).style.padding = 0); cells = metricsRow.cells; tbod.insertBefore(metricsRow, tbod.firstChild); for(; ++cellNum < colCount; colgroup.appendChild(document.createElement("col")).style.width = cells[cellNum].offsetWidth + "px"); var borderWidth = metricsRow.offsetHeight; metricsRow.className = "metricsRow"; borderWidth -= metricsRow.offsetHeight; tbod.removeChild(metricsRow); tableParent.insertBefore(topFauxRow, table).className = "fauxRow"; if(table.tHead) fauxRowTable.appendChild(table.tHead); var fauxRow = topFauxRow.cloneNode(true) , fauxRowCell = fauxRow.rows[0].cells[0]; fauxRowCell.insertBefore(headerHider, fauxRowCell.firstChild).style.marginBottom = -fauxRowTable.offsetHeight - borderWidth + "px"; if(table.caption) fauxRowTable.insertBefore(table.caption, fauxRowTable.firstChild); if(tbod.rows[0]) fauxRowTable.appendChild(tbod.cloneNode()).appendChild(tbod.rows[0]); for(; tbodNum < tbodCount; tbodNum++) { tbod = tbods[tbodNum]; rows = tbod.rows; for(; rows[0]; tableParent.insertBefore(fauxRow.cloneNode(true), table).rows[0].cells[0].children[1].appendChild(tbod.cloneNode()).appendChild(rows[0])); } tableParent.removeChild(table); } else tableParent.insertBefore(document.createElement("div"), table).appendChild(table).parentNode.className="fauxRow"; }; var tables = document.body.querySelectorAll("table.print") , tableNum = tables.length; for(; tableNum--; formatForPrint(tables[tableNum])); })(); </script> 

यह कैसे काम करता है (यदि आप परवाह नहीं करते हैं, तो आगे पढ़िए, आपको जो कुछ भी ज़रूरत है वह ऊपर है।)

प्रति @ किंग्सलम के अनुरोध, नीचे दिए गए एक स्पष्टीकरण है कि यह समाधान कैसे काम करता है। इसमें जावास्क्रिप्ट को शामिल नहीं किया गया है, जो सख्ती से जरूरी नहीं है (हालांकि यह इस तकनीक का उपयोग करना बहुत आसान बनाता है)। इसके बजाय, यह जेनरेट किए गए एचटीएमएल संरचनाओं और संबंधित सीएसएस पर केंद्रित है, जहां वास्तविक जादू होती है।

यहाँ वह तालिका है जिसके साथ हम काम करेंगे:

 <table> <tr><th>ColumnA</th><th>ColumnB</th></tr> <tr><td>row1</td><td>row1</td></tr> <tr><td>row2</td><td>row2</td></tr> <tr><td>row3</td><td>row3</td></tr> </table> 

अब क्रोम में jQuery का उपयोग करना प्रिंट करना संभव है …. कृपया इस कोड को देखें (मुझे माफ़ करना है कि इससे पहले कि मैं इस कोड के निर्माता को संशोधित करता हूं – और मेरी अंग्रेजी भाषा अच्छा नहीं है: डी हेहेह)

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DOCUMENT TITLE</title> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"/> <style type="text/css"> @media print{ table { page-break-after:auto;} tr { page-break-inside:avoid;} td { page-break-inside:auto;} thead { display:table-header-group } .row-fluid [class*="span"] { min-height: 20px; } } @page { margin-top: 1cm; margin-right: 1cm; margin-bottom:2cm; margin-left: 2cm;'; size:portrait; /* size:landscape; -webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); */ }; </style> </head> <body> <div id="print-header-wrapper"> <div class="row-fluid">HEADER TITLE 1</div> <div class="row-fluid">HEADER TITLE 2</div> </div> <div class="row-fluid" id="print-body-wrapper"> <table class="table" id="table_data"> <thead> <tr><th>TH 1</th><th>TH 2</th></tr> </thead> <tbody> <tr><td>TD 1</td><td>TD 2</td></tr> <tr><td>TD 1</td><td>TD 2</td></tr> <tr><td>TD 1</td><td>TD 2</td></tr> <tr><td>TD 1</td><td>TD 2</td></tr> <tr><td>TD 1</td><td>TD 2</td></tr> <tr><td>TD 1</td><td>TD 2</td></tr> <tr><td>TD 1</td><td>TD 2</td></tr> <tr><td>TD 1</td><td>TD 2</td></tr> <tr><td>TD 1</td><td>TD 2</td></tr> <tr><td>TD 1</td><td>TD 2</td></tr> <tr><td>TD 1</td><td>TD 2</td></tr> <tr><td>TD 1</td><td>TD 2</td></tr> <tr><td>TD 1</td><td>TD 2</td></tr> <tr><td>TD 1</td><td>TD 2</td></tr> <tr><td>TD 1</td><td>TD 2</td></tr> <tr><td>TD 1</td><td>TD 2</td></tr> </tbody> </table> <div id="lastDataTable"></div> </div> <script type="text/javascript"> jQuery(document).ready(function() { var printHeader = $('#print-header-wrapper').html(); var div_pageBreaker = '<div style="page-break-before:always;"></div>'; var per_page = 25; $('#table_data').each(function(index, element) { //how many pages of rows have we got? var pages = Math.ceil($('tbody tr').length / per_page); //if we only have one page no more if (pages == 1) { return; } //get the table we're splutting var table_to_split = $(element); var current_page = 1; //loop through each of our pages for (current_page = 1; current_page <= pages; current_page++) { //make a new copy of the table var cloned_table = table_to_split.clone(); //remove rows on later pages $('tbody tr', table_to_split).each(function(loop, row_element) { //if we've reached our max if (loop >= per_page) { //get rid of the row $(row_element).remove(); } }); //loop through the other copy $('tbody tr', cloned_table).each(function(loop, row_element) { //if we are before our current page if (loop < per_page) { //remove that one $(row_element).remove(); } }); //insert the other table afdter the copy if (current_page < pages) { $(div_pageBreaker).appendTo('#lastDataTable'); $(printHeader).appendTo('#lastDataTable'); $(cloned_table).appendTo('#lastDataTable'); } //make a break table_to_split = cloned_table; } }); }); </script> </body> </html> 

यह एक अन्य वृद्धि "प्रिंट ओरिएंटेड फ़ॉर्मेटर्स" (फ़ायरफ़ॉक्स, आईई) की बजाय वेबकैट, ब्लिंक और विवियोओस्टाइल में अभी भी उपलब्ध नहीं है।

आप यहां 4 संस्करण (6 साल और 45 संस्करण पहले!) के बाद से Google क्रोम के लिए इस मुद्दे की जांच कर सकते हैं, जहां हम इसकी सराहना कर सकते हैं कि उसे हाल ही में एक मालिक (फरवरी 2016) मिल गया है, जो उस पर भी काम कर रहे हैं।

कुछ बातों को भी डब्लू 3 में आयोजित किया गया है जहां हम इसकी उपयोगिता पर चिंता की सराहना कर सकते हैं:

चूंकि विखंडन ब्रेक पर तालिका शीर्षकों और पाद लेख दोहराते हैं आम तौर पर एक उपयोगी चीज होती है, मेरा सुझाव है कि हम एक आदर्श आवश्यकता बनाते हैं और कहते हैं कि जब तालिका एक ब्रेक फैलती है तो यूए को हेडर / पाद लेख पंक्तियां दोहराई जानी चाहिए।

इस बीच, डॉक्टर और डाटस्ट्रो और @thefredzx से जेएस और जेक्जरी कोड फ़ायरफ़ॉक्स या आईई (उनमें से ज्यादातर) का उपयोग नहीं करने वाले मेरे उपयोगकर्ताओं के लिए वास्तव में उपयोगी हैं।

इस सुविधा को शामिल करने वाले एक नए संस्करण के बारे में जागरूक होने वाला पहला व्यक्ति इसे यहां देखना चाहिए, हममें से बहुत से इसकी सराहना करेंगे।

क्रोम सेटिंग display: table-row-group; में मेरे परीक्षण से display: table-row-group; ईमानदारी से यह समस्या हो रही है।

उदाहरण के लिए यदि आप नीचे दिए गए बिना स्टाइल के प्रिंट की कोशिश करते हैं तो आप प्रत्येक पृष्ठ के शीर्ष पर संख्या देखेंगे, लेकिन अगर आप शैली जोड़ते हैं तो यह केवल परमाणु-चिह्न मेनू पर दिखाई देता है

 <style> thead { display: table-row-group; } </style> <table> <thead> <tr> <th>number</th> </tr> </thead> <tbody id="myTbody"> </tbody> </table> <script> for (i = 1; i <= 100; i++) { document.getElementById("myTbody").innerHTML += "<tr><td>" + i + "</td></tr>"; } </script> 

इन-कंपनी ब्राउज़र आधारित सिस्टमों के लिए, मैं उपयोगकर्ताओं को फ़ायरफ़ॉक्स या IE का उपयोग करने के लिए सलाह देता हूं; मुझे लगता है कि अगर उपयोगकर्ता उपयोगकर्ता क्रोम या समान सीमाएं (ओपेरा)