Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rendering malformed table for border-collapse #1893

Closed
kygoh opened this issue Jun 4, 2023 · 2 comments
Closed

Rendering malformed table for border-collapse #1893

kygoh opened this issue Jun 4, 2023 · 2 comments
Labels
CSS Questions about how to do something with CSS

Comments

@kygoh
Copy link
Contributor

kygoh commented Jun 4, 2023

I came across test_tables_2.py while working on #1884.

I've modified that test case into the html at the end so that it can be rendered by various tools:

Tool Result
Chrome browser chrome_test_table2.pdf
Safari browser safari_test_table2.pdf
paged.js on PrintCSS Playground paged.js_test_table2.pdf
Prince on PrintCSS Playground prince_test_table2.pdf
Weasyprint on PrintCSS Playground weasyprint_test_table2.pdf

Specifically for the cells with rowspan and colspan that overlap and the missing bottom right cell:

  • the results for Chrome and Prince appear to be similar
  • while Safari and paged.js share similar result
  • Weasyprint is the odd one out.

What would be the preferred result?

HTML used for testing:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>test_table2</title>
    <style type="text/css">
      table {
        border: 2px solid #00f;
        border-collapse: collapse;
        width: 100%;
      }
      td {
        width: 2px;
        height: 2px;
        padding: 1px;
        border: 1px solid transparent;
      }
      td {
        border-color: #ff7f7f;
      }
    </style>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td>R1C1</td>
          <td rowspan=2>R2C1</td>
          <td>R1C1</td>
        </tr>
        <tr>
          <td colspan=2>R1C2</td>
          <td>R1C1</td>
        </tr>
      </tbody>
      <tr>
        <td>R1C1</td>
        <td>R1C1</td>
      </tr>
    </table>
  </body>
</html>
@liZe liZe added the CSS Questions about how to do something with CSS label Jul 12, 2023
@liZe
Copy link
Member

liZe commented Jul 12, 2023

That’s a good question. We should read the specification draft and find what’s "right".

@kygoh
Copy link
Contributor Author

kygoh commented Sep 18, 2023

From rule 5 in https://www.w3.org/TR/CSS21/tables.html#table-layout:

Cells may span several rows or columns. (Although CSS 2.1 does not define how the number of spanned rows or columns is determined, a user agent may have special knowledge about the source document; a future update of CSS may provide a way to express this knowledge in CSS syntax.) Each cell is thus a rectangular box, one or more grid cells wide and high. The top row of this rectangle is in the row specified by the cell's parent. The rectangle must be as far to the left as possible, but the part of the cell in the first column it occupies must not overlap with any other cell box (i.e., a row-spanning cell starting in a prior row), and the cell must be to the right of all cells in the same row that are earlier in the source document. If this position would cause a column-spanning cell to overlap a row-spanning cell from a prior row, CSS does not define the results: implementations may either overlap the cells (as is done in many HTML implementations) or may shift the later cell to the right to avoid such overlap. (This constraint holds if the 'direction' property of the table is 'ltr'; if the 'direction' is 'rtl', interchange "left" and "right" in the previous two sentences.)

Here is an example illustrating rule 5. The following illegal (X)HTML snippet defines conflicting cells:

<table>
<tr><td>1 </td><td rowspan="2">2 </td><td>3 </td><td>4 </td></tr>
<tr><td colspan="2">5 </td></tr>
</table>

User agents are free to visually overlap the cells, as in the figure on the left, or to shift the cell to avoid the visual overlap, as in the figure on the right.

@kygoh kygoh closed this as completed Sep 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS Questions about how to do something with CSS
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@liZe @kygoh