Remove a strange line at the bottom of a page printing from html table

user_6672676 0
Viewed 247

I am implementing report printing which print from html tag. The report includes big table which can overflow into many pages. The page breaking stuff is perfectly fine. I'm able to put table header on top of every page. However, some page shows a line at the bottom like this in printing preview (Tested on Chrome and Edge. Header and footer option is already disabled).

enter image description here

Here is a brief html code of my table (I use bootstrap just for positioning but the table itself is not created with it)

 <table className='work-report-table mb-3 mx-auto'>
      <colgroup></colgroup>
      <thead>
        <tr>
          <th style={{ width: '15%' }}>วัน/เดือน/ปี</th>
           ...
        </tr>
      </thead>
      <tbody>
        {/* Just td manipulation */}
        {workReport?.works.map(x => <WorkReportRow key={x._id} work={x} />)}
      </tbody>
    </table>

and css code

table.work-report-table > tbody > tr > td {
  border: 1px solid black;
  text-align: center;
}

table.work-report-table > thead > tr > th {
  border: 1px solid black;
  text-align: center;
}

@page {
  margin-top: 18mm;
  margin-bottom: 18mm;
}

I wonder if there's something I do wrong.

Found this later : It seems that setting margin of @page causes the issue. But if I remove it, the content will fill the page too much and look not so good. Stills want the answer.

html-table printing css html
1 Answers

Try removing the border at the top of the table and the line should disappear. The border seems to be poking through from the next page when the table is split due to a page break.

I printed to PDF and the line wasn't there, so I'm hoping this is just a bug with how the page is rendered in the print dialog.

user_7373930
Related