একটি বৃহত এইচটিএমএল টেবিল প্রিন্ট করার সময় কীভাবে পৃষ্ঠা বিরতি মোকাবেলা করতে হবে

261

আমার একটি প্রকল্প রয়েছে যার জন্য অনেকগুলি সারি সহ একটি এইচটিএমএল টেবিল প্রিন্ট করা দরকার।

আমার সমস্যাটি হ'ল একাধিক পৃষ্ঠায় টেবিলটি যেভাবে মুদ্রিত হয়। এটি মাঝেমধ্যে অর্ধেক সারি কেটে ফেলবে, এটিকে অপঠনযোগ্য করে তুলবে কারণ অর্ধেক পৃষ্ঠার রক্তপাত প্রান্তে রয়েছে এবং অবশিষ্ট অংশটি পরবর্তী পৃষ্ঠার শীর্ষে মুদ্রিত হয়।

একমাত্র কলুষিত সমাধানের কথা আমি ভাবতে পারি যে কোনও টেবিলের পরিবর্তে স্ট্যাকড ডিআইভি ব্যবহার করা হয় এবং প্রয়োজনে পৃষ্ঠা-ব্রেকগুলি চাপিয়ে দেওয়া হয় .. তবে পুরো পরিবর্তনের মধ্য দিয়ে যাওয়ার আগে আমার মনে হয়েছিল আমি এখানে আগে জিজ্ঞাসা করতে পারি।

— H3।
সূত্র

28

স্পর্শকাতর উপর, এটি <thead>নিম্নলিখিত সিএসএস সহ আপনার টেবিলের সাথে যুক্ত করার উপযুক্ত হতে পারে thead {display: table-header-group; }যাতে পরবর্তী সমস্ত পৃষ্ঠাগুলিতে টেবিল-শিরোনামটি প্রিন্ট করা যায় (লুওউং ডেটা টেবিলগুলির জন্য দরকারী)।

— ডেভিড বলেছেন মনিকা

277

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

— সিনান আনার
সূত্র

18

এটি ওয়েবকিট ব্রাউজারগুলিতেও ব্যর্থ হয় (উদাঃ সাফারি এবং ক্রোম)

— মাইকেল হরেন

5

এটি এটি করার জন্য মানদণ্ডগুলির সাথে সঙ্গতিপূর্ণ উপায় হ'ল, বর্তমানে মান প্রয়োগ করা একমাত্র ব্রাউজার হ'ল অপেরা। দ্রষ্টব্য যে এটি সিএস 2 এর একটি অংশ, এবং তাই বাস্তবায়নের অভাব কিছুটা সময় আসার সমস্যা হতে পারে, কারণ দৃশ্যত কেউই পাত্তা দেয় না।

— pkh

16

সিএসএস ২.১ স্পেসিফিকেশন নির্দেশ করে যে পৃষ্ঠা বিরতি শৈলীর বৈশিষ্ট্যগুলি কেবলমাত্র ব্লক-স্তরীয় উপাদানগুলিতে প্রয়োগ করা হয়। সারণি সারিগুলির জন্য ডিফল্ট প্রদর্শন মোডটি সারণি-সারি। দুর্ভাগ্যক্রমে, কোনও টেবিলের উপাদানগুলি টেবিলটি নিজেই ডিফল্টরূপে ব্লক স্তরের উপাদান নয়।

— lsuarez

2

@ সানান্নার এটির কোনও প্রয়োজন নয়, সুতরাং আপনি এটির উপর নির্ভর করতে পারবেন না এবং দুর্ভাগ্যক্রমে আমার পরীক্ষা থেকে আমি দেখতে পাচ্ছি যে ওয়েবকিট "পারে" দেখেছিল এবং এর বাইরে যে কোনও কিছুকে উপেক্ষা করেছে। আশ্চর্যের বিষয় হল, আইই এর চেয়ে কিছু দুর্দান্ত বড় টেবিল প্রিন্টিং সমর্থন পেয়েছে। কখনই ভাবিনি যে আমি কোনও নির্দিষ্ট বিন্দুতে এর প্রশংসা গান করব

— lsuarez

6

আমি নিশ্চিত করতে পারি যে এটি ক্রোম বা অন্য কোনও ওয়েবকিট ব্রাউজারে (যেমন: সাফারি, অপেরা) ঠিকঠাক কাজ করে না - যদি না "fineচ্ছিক" কাজ করে আপনি বোঝাতে চান ""চ্ছিক বিবেচিত কোনও বৈশিষ্ট্য বাদ দেয় না"। আমি মনে করি যে বেশিরভাগ লোকেরা যা চান তা হ'ল শিরোনাম এবং পাদচরণগুলি এবং টেবিলগুলি যা কেবল সারিগুলির মধ্যে পৃষ্ঠা বিরতি দেয়, যার কোনটিই 2015/11/13 হিসাবে ওয়েবকিটে প্রয়োগ করা হয় না।

— ডক্টরডেস্ট্রাকটো

47

দ্রষ্টব্য: পৃষ্ঠা-বিরতি-পরে: সর্বদা ট্যাগের জন্য এটি টেবিলের শেষ বিট পরে একটি পৃষ্ঠা বিরতি তৈরি করবে, প্রতিবারের শেষে সম্পূর্ণ ফাঁকা পৃষ্ঠা তৈরি করবে! এটি ঠিক করার জন্য এটি কেবল পৃষ্ঠা-ব্রেক-পরে: অটোতে পরিবর্তন করুন। এটি সঠিকভাবে ভেঙ্গে যাবে এবং কোনও অতিরিক্ত ফাঁকা পৃষ্ঠা তৈরি করবে না।

<html>
<head>
<style>
@media print
{
  table { page-break-after:auto }
  tr    { page-break-inside:avoid; page-break-after:auto }
  td    { page-break-inside:avoid; page-break-after:auto }
  thead { display:table-header-group }
  tfoot { display:table-footer-group }
}
</style>
</head>

<body>
....
</body>
</html>

— জোশ পি
সূত্র

Chrome এ আমার জন্য কাজ করে এবং এটি একটি দুর্দান্ত সরল CSS সমাধান।

— রায়ান

1

আমি একই সমাধান চেষ্টা করছি, তবে এটি টেবিলের ডেটা ভাঙবে না এবং পরের পৃষ্ঠায় এটি প্রদর্শন করার পরিবর্তে অতিরিক্ত ডেটা অদৃশ্য হবে না। কোন অনুমান?

— নুল পয়েন্টার

24

সিনান অ্যানির সমাধান থেকে প্রসারণ:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    div   { page-break-inside:avoid; } /* This is the key */
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tr>
            <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
        </tr>
        <tr>
            <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

এটা মনে হচ্ছে যে page-break-inside:avoid কিছু ব্রাউজারগুলিতে কেবল ব্লক উপাদানগুলির জন্য বিবেচনা করা হয়, সেল, টেবিল, সারি নয় ইনলাইন-ব্লকের জন্য নয়।

আপনি যদি ট্যাগটিতে চেষ্টা করে দেখে থাকেন এবং display:blockএটি TRব্যবহার করেন page-break-inside:avoidতবে এটি কার্যকর হয় তবে আপনার টেবিল বিন্যাসের সাথে মেসেজ পড়ে।

— vicenteherrera
সূত্র

2

জিকুরির সাথে গতিশীলভাবে ডিভগুলি যুক্ত করার একটি সহজ উপায়:$(document).ready(function(){$("table tbody th, table tbody td").wrapInner("<div></div>");});

— ক্রিস ব্লুম

1

ধন্যবাদ সিনান আরান, ভিসেন্তেহেরেরা এবং ক্রিসব্লুম 7 to আমি আপনার উত্তরগুলির সংমিশ্রণটি প্রয়োগ করেছি এবং এটি এখন কার্যকর!

— নুরহাক কেয়া

আপনি tr { display: block; }সমস্ত বহিরাগত <div>উপাদান যুক্ত করার পরিবর্তে @ মিডিয়া সিএসএসকে কেবল মুদ্রণের জন্য সেট করার চেষ্টা করতে পারেন । (পরীক্ষা করা হয়নি তবে দেখার মতো মূল্যবান)

— স্টিফেন আর

11

এখানে উত্তরগুলির কোনওটিই ক্রোমে আমার পক্ষে কাজ করেনি। গিটহাবের অ্যাভারিন এই উদ্দেশ্যে কিছু কার্যকর জাভাস্ক্রিপ্ট তৈরি করেছে এবং এটি আমার পক্ষে কাজ করেছে:

আপনার কোডে কেবল জেএস যুক্ত করুন এবং আপনার টেবিলটিতে 'splitForPress' ক্লাস যুক্ত করুন এবং এটি সারণীটি একাধিক পৃষ্ঠায় বিচ্ছিন্নভাবে বিভক্ত করবে এবং প্রতিটি পৃষ্ঠায় টেবিল শিরোনাম যুক্ত করবে।

— MDave
সূত্র

কীভাবে এটি প্রয়োগ করবেন সে সম্পর্কে আপনার কী নমুনা রয়েছে? আমি আমার টেবিলের ক্লাসের নাম নির্ধারণ করার চেষ্টা করেছি splitForPrintতবে জেএসে কোথাও ক্লাসের নামটি ব্যবহার করে উপাদানটির রেফারেন্স নেওয়া হয়নি splitForPrint। শুধুমাত্র অংশ যেখানে var splitClassName = 'splitForPrint';এটি।

— কমপ্যাক LE2202x

ডাউন ভোট দিয়েছে কারণ আপনার সাথে লিঙ্কিত স্ক্রিপ্টটি চেরি-বাছাই এবং পুনর্গঠন ব্যতীত ওপি-র সমস্যার সমাধান করে না, এবং কীভাবে এটি করা যায় তার কোনও উদাহরণ আপনি সরবরাহ করেননি।

— ক্রিস ব্লুম

আমার জন্য কবজির মতো কাজ করেছেন, অন্য কোনও সমাধান সমাধান করেনি। সঠিক বিরতিগুলি পেতে +1 কে কিছুটা CSS যুক্ত করতে হয়েছিল page পৃষ্ঠা-বিরতি {পৃষ্ঠা-বিরতি-পরে: সর্বদা; }

— ফুগাস

হ্যাঁ .পৃষ্ঠা বিরতি {পৃষ্ঠা-বিরতি পরে: সর্বদা; } এটা আমার দিন বাঁচায়!

— মিলডকি

7

এই সিএসএস বৈশিষ্ট্যগুলি ব্যবহার করুন:

page-break-after

page-break-before

এই ক্ষেত্রে:

<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>

<body>
....
</body>
</html>

মাধ্যমে

— marcgg
সূত্র

আমি নিশ্চিত নই, আপনাকে যাচাই করতে হবে। যদি তা না হয় তবে বিভিন্ন অ্যারেতে বিভক্ত হয়ে অ্যারেগুলি একটি খালি

— ডিভ দিয়ে

আপনি এটি টেবিল সারি বা এমনকি সেল প্রয়োগ করতে হবে, কিন্তু টেবিলের জন্য না, আমি মনে করি। তা বাদে এটি কাজ করা উচিত।

— পেক্কা

2

ক্রোমে কাজ করে না।

— 6/13/2012 এ

5

আমি সম্প্রতি একটি ভাল সমাধান দিয়ে এই সমস্যাটি সমাধান করেছি।

সিএসএস :

.avoidBreak { 
    border: 2px solid;
    page-break-inside:avoid;
}

জেএস :

function Print(){
    $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width",  $(this).width() + "px")  });
    $(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
    window.print();
}

একটি যাদুমন্ত্র মত কাজ করে!

— ওয়েণ্ডেল টাভারেস
সূত্র

2

আমি কিছু টুইটের সাথে (যা সম্ভবত বুটস্ট্র্যাপ 3 সুনির্দিষ্ট) দিয়ে @ ভিসেন্তেরেরের পদ্ধতির অনুসরণ করে শেষ করেছি।

মূলত; আমরা trগুলি বা tdগুলি ভাঙতে পারি না কারণ তারা ব্লক-স্তরীয় উপাদান নয়। সুতরাং আমরা divপ্রতিটি মধ্যে এস এম্বেড , এবং এর page-break-*বিরুদ্ধে আমাদের বিধি প্রয়োগ div। দ্বিতীয়ত; আমরা কোনও স্টাইলিং শিল্পকর্মের জন্য ক্ষতিপূরণ দেওয়ার জন্য এই ডিভগুলির প্রত্যেকের শীর্ষে কিছু প্যাডিং যুক্ত করি।

<style>
    @media print {
        /* avoid cutting tr's in half */
        th div, td div {
            margin-top:-8px;
            padding-top:8px;
            page-break-inside:avoid;
        }
    }
</style>
<script>
    $(document).ready(function(){
        // Wrap each tr and td's content within a div
        // (todo: add logic so we only do this when printing)
        $("table tbody th, table tbody td").wrapInner("<div></div>");
    })
</script>

মার্জিন এবং প্যাডিং সামঞ্জস্যগুলি প্রবর্তিত হওয়া এক ধরণের জিটার অফসেট করার জন্য প্রয়োজনীয় ছিল (আমার অনুমান অনুসারে - বুটস্ট্র্যাপ থেকে)। আমি নিশ্চিত নই যে আমি এই প্রশ্নের অন্যান্য উত্তরগুলি থেকে কোনও নতুন সমাধান উপস্থাপন করছি, তবে আমি অনুভব করেছি যে এটি কারওর পক্ষে সহায়তা করবে।

— হারুন
সূত্র

1

আমি একই সমস্যার মুখোমুখি হয়েছি এবং সর্বত্র একটি সমাধানের জন্য অনুসন্ধান করেছি, শেষ পর্যন্ত, আমি এমন কোনও কিছু জমা করি যা প্রতিটি ব্রাউজারের জন্য আমার জন্য কাজ করে।

html {
height: 0;
}

এই CSS ব্যবহার করুন বা CSS এর পরিবর্তে আপনার এই জাভাস্ক্রিপ্ট থাকতে পারে

$("html").height(0);

আশা করি এটি আপনার পক্ষেও কাজ করবে।

— স্থূলবুদ্ধি বাচাল ব্যক্তি
সূত্র

0

আমি অনেকগুলি সমাধান দেখেছি এবং যে কেউ ভাল কাজ করছে না।

সুতরাং আমি একটি ছোট কৌশল চেষ্টা করেছিলাম এবং এটি কার্যকর হয়:

স্টাইল সহ টিফুট: position: fixed; bottom: 0px; শেষ পৃষ্ঠার নীচে স্থাপন করা হয়েছে, তবে পাদলেখ খুব বেশি হলে এটি টেবিলের সামগ্রীতে আবৃত থাকে।

কেবলমাত্র টিফুট: display: table-footer-group; ওভারল্যাপ করা হয়নি, তবে শেষ পৃষ্ঠার নীচে নেই ...

দুটি tfoot রাখুন:

TFOOT.placer {
  display: table-footer-group;
  height: 130px;
}

TFOOT.contenter {
  display: table-footer-group;
  position: fixed;
  bottom: 0px;	
  height: 130px;
}

<TFOOT  class='placer'> 
  <TR>
    <TD>
      <!--  empty here
-->
    </TD>
  </TR>
</TFOOT>	
<TFOOT  class='contenter'> 
  <TR>
    <TD>
      your long text or high image here
    </TD>
  </TR>
</TFOOT>

স্নিপেট প্রসারিত করুন

একটি অ-সর্বশেষ পৃষ্ঠাগুলিতে স্থান সংরক্ষণ করে, দ্বিতীয়টি আপনার প্রকৃত পাদচরণে রাখে।

— জেনন কে।
সূত্র

-1

আমি উপরোক্ত সমস্ত পরামর্শ চেষ্টা করেছি এবং এই সমস্যার জন্য সহজ এবং কার্যকারী ক্রস ব্রাউজার সমাধান পেয়েছি। এই সমাধানের জন্য কোনও স্টাইল বা পৃষ্ঠা বিরতির প্রয়োজন নেই। সমাধানের জন্য, টেবিলের বিন্যাসটি এমন হওয়া উচিত:

<table>
    <thead>  <!-- there should be <thead> tag-->
        <td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>-->
    </thead>
    <tbody><!---<tbody>also must-->
        <tr>
            <td>data</td>
        </tr>
        <!--100 more rows-->
    </tbody>
</table>

উপরে বিন্যাস পরীক্ষা করা হয়েছে এবং ক্রস ব্রাউজারে কাজ করছে

— অনন্ত ডস
সূত্র

-2

ওয়েল গাইস ... বেশিরভাগ সলিউশন এখানে কাজ করে নি। সুতরাং এইভাবে জিনিসগুলি আমার জন্য কাজ করেছিল ..

এইচটিএমএল

<table>
  <thead>
   <tr>
     <th style="border:none;height:26px;"></th>
     <th style="border:none;height:26px;"></th>
     .
     .
   </tr>
   <tr>
     <th style="border:1px solid black">ABC</th>
     <th style="border:1px solid black">ABC</th>
     .
     .
   <tr>
  </thead>
<tbody>

    //YOUR CODE

</tbody>
</table>

মাথার প্রথম সেটটি একটি ডামি হিসাবে ব্যবহার করা হয় যাতে পৃষ্ঠ বিরতি চলাকালীন ২ য় শিরোনামে (অর্থাৎ আসল মাথা) অনুপস্থিত শীর্ষ সীমানা না ঘটে be

— Aneesh
সূত্র

-3

গৃহীত উত্তরগুলি সমস্ত ব্রাউজারগুলিতে আমার পক্ষে কাজ করে না, তবে নিম্নলিখিত সিএসএস আমার পক্ষে কাজ করে:

tr    
{ 
  display: table-row-group;
  page-break-inside:avoid; 
  page-break-after:auto;
}

এইচটিএমএল কাঠামোটি ছিল:

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
    ...
  </tbody>
</table>

আমার ক্ষেত্রে, এর সাথে আরও কিছু অতিরিক্ত সমস্যা ছিল thead tr, তবে এটি সারণী সারিগুলি ভাঙ্গা থেকে রক্ষা করার মূল সমস্যাটি সমাধান করেছে।

শিরোনাম ইস্যুগুলির কারণে, আমি শেষ পর্যন্ত শেষ করেছি:

#theTable td *
{
  page-break-inside:avoid;
}

এটি সারিগুলি ভাঙ্গা থেকে আটকাতে পারেনি; কেবলমাত্র প্রতিটি কক্ষের সামগ্রী।

— ডেভিড মোলার
সূত্র