Wkhtmltopdf: HTML 테이블 변환으로 인해 행이 잘못 정렬됨

Question

wkhtmltopdf를 사용하여 HTML 테이블 보고서를 변환하세요.

으아악

여기에 코드가 많다는 것을 알고 있지만 정렬이 잘못된 줄이 몇 개 있습니다. 한 줄에만 있는 것이 아니라 무작위입니다. HTML을 브라우저에 넣으면 정상적으로 표시되지만 인쇄 버전으로 변환되지 않습니다. 이 문제를 해결하려면 어떻게 해야 합니까? 감사합니다

Answer 1

줄을 더 추가한 후 문제를 재현할 수 있는데, 이는 문제가 실제로 예측할 수 없다는 것을 보여줍니다.

그러나 문제는 border-collapse:collapse; CSS 속성으로 인해 발생한 것 같습니다. 이를 제거하면 모든 행의 높이가 동일해집니다.

물론 이렇게 하면 각 표 셀 주위에 흰색 테두리가 생기므로 바람직하지 않을 수 있습니다.

테두리를 셀과 조화롭게 만들려면 개별 셀의 background-color 속성 대신 전체 테이블의 배경 패턴을 사용하여 열에 색상을 지정하는 것이 좋습니다.

아래 코드에서는 테이블 열 너비와 색상이 있는 세 개의 직사각형으로 구성된 인라인 SVG 이미지를 만듭니다.

으아아아

변환 중에 열 너비를 올바르게 계산하려면 dpi 설정을 130으로 조정해야 합니다.

으아아아

HTML 코드:

으아아아

생성된 PDF 파일: