Open Bug 322810 Opened 19 years ago Updated 2 years ago

[BC] Border jut out from cell when using CSS stylesheet, colspan, rowspan and collapse

Categories

(Core :: Layout: Tables, defect)

defect

Tracking

()

People

(Reporter: emmanuel.guiton, Unassigned)

References

(Depends on 1 open bug, Blocks 1 open bug)

Details

(Keywords: testcase)

Attachments

(1 file, 1 obsolete file)

User-Agent: Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.8) Gecko/20051225 Debian/1.5.dfsg-3 Firefox/1.5 Build Identifier: Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.8) Gecko/20051225 Debian/1.5.dfsg-3 Firefox/1.5 The bug occurs when using at the same time a CSS border style, the colspan attribute, the rowspan attribute and the CSS border-collapse: collapse in a table. As far as I noticed, the bug happens in a table where the CSS property "border-collapse: collapse;" AND when a cell (A) uses the colspan attribute AND is next to a cell (B) which uses the rowspan attribute AND other cells are under them. Then, the bottom border style set for the A cell jut out so that the bottom borders of the A and B cells are displayed according to the A cell's style. Reproducible: Always Steps to Reproduce: 1. Create a 3x3 table with CSS property "border-collapse: collapse" 2. Make the first cell on the second row spans other the second cell of the same row; let's call this cell "A cell" 3. Make the last cell of th first row spans other the last cell of the scond row 4. Set some default border style for the table cells 5. Set a different border style for the A cell 6. Enjoy Actual Results: The border on the bottom of the A cell spreads to the other cell on the right Expected Results: Only the A cell should have a different border style
Attached file Test case implementing the buggy table (obsolete) (deleted) —
Comment on attachment 207969 [details] Test case implementing the buggy table ><HTML><HEAD> > > <STYLE type="text/css"> > table > { > border-collapse: collapse; > } > > td > { > text-align: center; > border: thin red solid; > } > > .bug > { > border: 3px solid red; > } > </STYLE></HEAD><BODY> > <CENTER> > <TABLE> > <TBODY><TR> > <TD> > 11 > </TD> > <TD> > 12 > </TD> > <TD rowspan="2"> > 13 <BR/> 23 > </TD> > </TR> > <TR> > <TD class="bug"> > 21 - 22 > </TD> > </TR> > <TR> > <TD> > 31 > </TD> > <TD> > 32 > </TD> > <TD> > 33 > </TD> > </TR> > </TBODY></TABLE> > </CENTER> > </BODY></HTML>
Comment on attachment 207969 [details] Test case implementing the buggy table ><HTML><HEAD> > > <STYLE type="text/css"> > table > { > border-collapse: collapse; > } > > td > { > text-align: center; > border: thin red solid; > } > > .bug > { > border: 3px solid red; > } > </STYLE></HEAD><BODY> > <CENTER> > <TABLE> > <TBODY><TR> > <TD> > 11 > </TD> > <TD> > 12 > </TD> > <TD rowspan="2"> > 13 <BR/> 23 > </TD> > </TR> > <TR> > <TD colspan="2"> > 21 - 22 > </TD> > </TR> > <TR> > <TD> > 31 > </TD> > <TD> > 32 > </TD> > <TD> > 33 > </TD> > </TR> > </TBODY></TABLE> > </CENTER> > </BODY></HTML>
Comment on attachment 207969 [details] Test case implementing the buggy table I had left a samll mistake in the test case, there is a class="bug" in a cell that should be taken away.
Comment on attachment 207969 [details] Test case implementing the buggy table Sorry for modifying and modifying again: the first report was the good one: I was wrong when saying the class="bug" must not be there, it has to be.
Component: General → Layout: Tables
Product: Firefox → Core
QA Contact: general → layout.tables
Version: unspecified → 1.8 Branch
Attached file Minimised testcase (deleted) —
Attachment #207969 - Attachment is obsolete: true
Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9a1) Gecko/20060219 Firefox/1.6a1 ID:2006021908 Confirmed. I've attached a minimised testcase (removed an extraneous CSS rule and made the pixel sizes more explicit). Just to reiterate: this does not happen if the border-collapse isn't set to "collapse".
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: testcase
Version: 1.8 Branch → Trunk
Summary: Border jut out from cell when using CSS stylesheet, colspan, rowspan and collapse → [BC] Border jut out from cell when using CSS stylesheet, colspan, rowspan and collapse
Blocks: 332740
OS: Linux → All
Hardware: x86 → All
Sorry to be a pain, but how is it possible that such a basic bug has been able to survive for over 4 years? It's a very common problem when you use tables to create diagrams, or when you create fancy data tables. Is it impossible to fix, or has it all this time been overlooked?
Note that Bug 332740 shows this problem can happen without "border-collapse: collapse", when "rules=rows" is used.
(In reply to comment #10) > Note that Bug 332740 shows this problem can happen without "border-collapse: > collapse", when "rules=rows" is used. That's the same thing; rules=rows turns on border-collapse: collapse behind the scenes.
(In reply to comment #9) > Sorry to be a pain, but how is it possible that such a basic bug has been able > to survive for over 4 years? It's a very common problem when you use tables to > create diagrams, or when you create fancy data tables. > > Is it impossible to fix, or has it all this time been overlooked? It's not impossible to fix, but it requires reading through and debugging the code in, nsTableFrame::CalcBCBorders (in layout/tables/nsTableFrame.cpp) or perhaps the BCBorder-related code in layout/tables/nsTablePainter.cpp .
and bug 540256 should fix it.
Depends on: 540256
Workaround for people running into this problem and needing a quick fix: td { border: 0px solid; } Adding this line to your stylesheet should fix the cases where superfluous borders are visible. It does not help against the "rules" variant of the bug.
I've just stumbled across what I think is the same bug. In an actual use case, I discovered a border line being drawn through the middle of a table cell. This table cell has a rowspan, but it still shouldn't have a border INSIDE of the cell. Here is my fairly minimal test case: <html> <head> <style type="text/css"> table { border-collapse: collapse; } td { border: 4px solid black; } td.no_right { border-right: 0px none; } td.no_left { border-left: 0px none; } </style> </head> <body> <table class="sample"> <tr><td rowspan="2" class="no_right">1<br>1</td> <td class="no_right no_left">2</td> <td rowspan="2" class="no_left">3<br>3</td> </tr> <tr><td rowspan="2">4</td> </tr> <tr> <td rowspan="2" class="no_right">5<br>5</td> <td rowspan="2" class="no_left">6<br>6</td> </tr> <tr><td class="no_right no_left">7</td> </tr> </table> </body></html>
Blocks: 195299
Blocks: 608531
No longer blocks: 608531
Assignee: nobody → ywu
Assignee: ywu → nobody
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: