When a large amount of data is entered into "td" cells within a table, several special cases emerge after pagination: the data does not start from the top, giving rise to regions devoid of content.

vivliostyle / vivliostyle.js

📖 The power of CSS typesetting, right at your fingertips.

https://vivliostyle.org

GNU Affero General Public License v3.0

602 stars 52 forks source link

When a large amount of data is entered into "td" cells within a table, several special cases emerge after pagination: the data does not start from the top, giving rise to regions devoid of content. #1346

Open jiang0112 opened 3 months ago

jiang0112 commented 3 months ago

          When a large amount of data is entered into "td" cells within a table, several special cases emerge after pagination: the data does not start from the top, giving rise to regions devoid of content.

iwEcAqNwbmcDAQTRAqUF0QMoBrCZrHRLDkeCJQZUmbn_Rd8AB9IZjKU6CAAJomltCgAL0gAAtIc png_720x720q90

min.txt

Originally posted by @jiang0112 in https://github.com/vivliostyle/vivliostyle.js/issues/1326#issuecomment-2162634861

MurakamiShinyu commented 3 months ago

The table cell content is vertically center-aligned by default. Adding the following style will solve this problem:

td {
  vertical-align: top;
}

Test: https://vivliostyle.org/viewer/#src=https://gist.githubusercontent.com/MurakamiShinyu/d7b9c81ed08a40c0061a51baa318da57/raw/2ffc1a7b7c9026b3bfb4c41f3d57a1751382f34b/min.html&style=data:,/*%3Cviewer%3E*/%0A/*%3C/viewer%3E*/%0Atd%20%7B%0A%20%20vertical-align:%20top;%0A%7D