টেবিলের সারি ভিতরে পৃষ্ঠা বিরতি এড়ানো

Question 1

আমি এইচটিএমএলে টেবিলের সারিটির ভিতরে পৃষ্ঠা বিরতি এড়াতে চাই, যখন আমি ডাব্লুএইচটিএমএল পিডিএফকে ডাব্লুএইচটিএমলেটপডিএফ দ্বারা রূপান্তর করি। আমি পৃষ্ঠা-বিরতি ভিতরে ব্যবহার করি: টেবিল- এর কাজগুলি এড়িয়ে চলুন তবে আমার অনেকগুলি সারি রয়েছে, তবে কাজ হয় না। ট্রাকে যদি ব্লক বা অন্য কিছু হিসাবে প্রদর্শন সেট করে তবে এটি সারণির বিন্যাস পরিবর্তন করে ডাবল বর্ডার সন্নিবেশ করান। অথবা প্রতিটি পৃষ্ঠায় টেবিল শিরোনাম সন্নিবেশ করা সম্ভব, যেখানে টেবিলটি বিভক্ত ছিল।

Question 2

আপনি সিএসএস দিয়ে এটি চেষ্টা করতে পারেন:

<table class="print-friendly">
 <!-- The rest of your table here -->
</table>

<style>
    table.print-friendly tr td, table.print-friendly tr th {
        page-break-inside: avoid;
    }
</style>

বেশিরভাগ সিএসএস বিধি <tr>সরাসরি ট্যাগগুলিতে প্রযোজ্য না , কারণ আপনি উপরে উল্লিখিত হ'ল - তাদের একটি অনন্য displayশৈলী রয়েছে, যা এই সিএসএস বিধিগুলিকে মঞ্জুরি দেয় না। যাইহোক, <td>এবং <th>তাদের মধ্যে ট্যাগ সাধারণত কি স্পেসিফিকেশন এই ধরনের অনুমতি - এবং আপনি সহজেই নিয়ম সকলের জন্য child- আবেদন করতে পারেন <tr>'s এবং <td>উপরে দেখানো' র সিএসএস ব্যবহার করে।

Question 3

ওয়েবকিট ব্রাউজারগুলিতে এই সমস্যাটি মোকাবিলার জন্য আমি যে সর্বোত্তম উপায়টি খুঁজে পেয়েছি তা হ'ল প্রতিটি টিডি উপাদানটির ভিতরে একটি ডিভ স্থাপন করা এবং পৃষ্ঠা-বিরতি-অভ্যন্তর প্রয়োগ করা: ডিভের সাথে শৈলী এড়ানো যেমন:

...
<td>
  <div class="avoid">
    Cell content.
  </div>
</td>
...
<style type="text/css">
  .avoid {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* to keep the page break from cutting too close to the text in the div */
  }
</style>

যদিও ক্রোম অনুমিত হয় যে 'পৃষ্ঠা-বিরতি ভিতরে: এড়ানো;' সম্পত্তি, এটি পিডিএফ তৈরি করতে wktohtml ব্যবহার করার সময় একটি পৃষ্ঠা বিরতি দিয়ে সারি সামগ্রীকে অর্ধেকভাগে বিচ্ছিন্ন করা থেকে মনে হয়। টিআর উপাদানটি পৃষ্ঠাটি কিছুটা বিরতিতে ঝুলতে পারে, তবে ডিভ এবং এর ভিতরে থাকা কিছুতেই হবে না।

Question 4

আমি উপরের ( লিঙ্ক ) @ অ্যারোনহিল দ্বারা 4px কৌশলটি ব্যবহার করেছি এবং এটি সত্যই ভাল কাজ করেছে! আমি যদিও <td>টেবিলের প্রত্যেকটিতে একটি ক্লাস যুক্ত করার প্রয়োজন ছাড়াই একটি সহজ সিএসএস নিয়ম ব্যবহার করেছি ।

@media print {
    table tbody tr td:before,
    table tbody tr td:after {
        content : "" ;
        height : 4px ;
        display : block ;
    }
}

Question 5

এই সমস্যাটি সমাধান করার জন্য আমি একটি নতুন উপায় খুঁজে পেয়েছি, কমপক্ষে আমার জন্য (ক্রোম সংস্করণ 63.0.3239.84 (অফিসিয়াল বিল্ড) (OS৪-বিট) MacOS সিয়েরায়)

মূল টেবিলে একটি সিএসএস বিধি যুক্ত করুন:

table{
    border-collapse:collapse;
}

এবং টিডি জন্য:

tr td{
    page-break-inside: avoid;
    white-space: nowrap;
}

আমি আসলে স্ট্যাক ওভারফ্লোতে এই সমাধানটি পেয়েছি, তবে এটি প্রাথমিক গুগল অনুসন্ধানগুলিতে প্রদর্শিত হয়নি: টেবিল সারির অভ্যন্তরে পৃষ্ঠা বিরতি বন্ধ করার জন্য সিএসএস

সমস্যা সমাধানের জন্য @ ইব্রেন্নান ২০৮-এ কুদোস!

Question 6

সিএসএস পৃষ্ঠা-বিরতি অভ্যন্তর ব্যবহার করা কাজ করবে না (এটি একটি ওয়েবকিট ব্রাউজার সমস্যা)।

একটি wkhtmltopdf জাভাস্ক্রিপ্ট টেবিল বিভাজন হ্যাক যা আপনার নির্দিষ্ট পৃষ্ঠার উপর নির্ভর করে স্বয়ংক্রিয়ভাবে একটি দীর্ঘ টেবিলটি ছোট টেবিলগুলিতে বিভক্ত হয় (x সারিগুলির স্থির মানের পরে পৃষ্ঠা ভাঙার পরিবর্তে): https://gist.github.com/3683510

Question 7

অ্যারন হিলের উত্তরের ভিত্তিতে আমি নিম্নলিখিত জাভাস্ক্রিপ্ট লিখেছি:

//Add a div to each table cell so these don't break across pages when printed
//See http://stackoverflow.com/a/17982110/201648
$(document).ready(function () {
    var ctlTd = $('.dontSplit td');
    if (ctlTd.length > 0)
    {
        //console.log('Found ctlTd');
        ctlTd.wrapInner('<div class="avoidBreak" />');
    }
});

যেখানে ড্যান্টস্প্লিট হ'ল টেবিলের শ্রেণি যেখানে আপনি চান না যে টিডি'র পৃষ্ঠা জুড়ে বিভক্ত হয়। নিম্নলিখিত সিএসএস দিয়ে এটি ব্যবহার করুন (আবার, অ্যারোন হিলকে দায়ী):

 .avoidBreak {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* to keep the page break from cutting too close to the text in the div */
  }

এটি ক্রোমের সর্বশেষ সংস্করণে দুর্দান্তভাবে কাজ করছে বলে মনে হচ্ছে।

Question 8

আমি কাজ করার একমাত্র উপায় হ'ল প্রতিটি টিআর এলিমেন্টকে তার নিজস্ব টিবিডি ওয়াইড উপাদানটির মধ্যে স্থাপন করা এবং সিএসএসের মাধ্যমে পৃষ্ঠা বিরতি নিয়মগুলি টিবিডি উপাদানটিতে প্রয়োগ করা ছিল

Question 9

দিয়ে চেষ্টা করুন

white-space: nowrap;

স্টাইল থেকে টিডি এটি এড়াতে এড়াতে নতুন লাইনে।

Question 10

আমি খুঁজে পেয়েছি যে page-break-inside: avoidটেবিলের মূল উপাদানগুলির মধ্যে যদি কোনও হয় display: inline-blockবা কাজ করে না flex। সমস্ত অভিভাবক উপাদান রয়েছে তা নিশ্চিত করুন display: block।

এছাড়াও অগ্রাহ্য বিবেচনা table, tr, tdএর displayCSS এর সঙ্গে শৈলী gridমুদ্রণ লেআউট জন্য আপনি টেবিলের সাথে সমস্যা হচ্ছে না।

Question 11

2020 সমাধান

আমি নিয়মিত সমস্ত ব্রাউজারগুলিতে কাজ করতে পারি কেবল তা হ'ল প্রতিটি সারিটিকে তার নিজস্ব টেবিল উপাদানটির ভিতরে .োকানো । এটি নোড এইচটিএমএল-পিডিএফ সহও কাজ করে। তারপরে সবকিছু সেট করুন page-break-inside: avoid।

table,
tr,
td,
div {
    page-break-inside: avoid;
}

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

td:first-child { width: 30% }
td:last-child { width: 70% }

উদাহরণ

<table>
  <tr>
    <td>Forename</td>
    <td>John</td>
  </tr>
</table>
<table>
  <tr>
    <td>Surname</td>
    <td>Piper</td>
  </tr>
</table>
<table>
  <tr>
    <td>Website</td>
    <td>desiringgod.org</td>
  </tr>
</table>

Question 12

এটি একটি পুরানো প্রশ্ন তবে আমি সম্প্রতি এই একই ত্রুটির মধ্যে পড়েছি। আমার ক্ষেত্রে সমস্যাটি বুটস্ট্র্যাপের table-responsiveশ্রেণীর সাথে সম্পর্কিত , যা ঘটনাক্রমে <table>উপাদানটিতে ব্যবহৃত হয়েছিল ।

সুতরাং, আপনার যদি একই সমস্যা থাকে, wkhtmltopdf কল করার সময় ক্লাস table-responsiveথেকে সরিয়ে দেওয়ার চেষ্টা করুন <table>।