HTML table cell border-right painted on the outside of the table past its boundary with collapsed borders
Reported by
tekiela...@gmail.com,
Apr 1 2018
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36 Steps to reproduce the problem: 1. Create a div with fixed width 2. Insert a table with collapsed border and width: 100% into that div 3. Set 1px border on TD and 0px on TH 4. The table expands past the div size i.e. >100% and overflows the container 5. Alternatively use the test case and compare the behavior with border-collapse on and off. What is the expected behavior? Expected behaviour is that the table total width is maximum 100% of the parent container. Border on the table cell should not overflow neither the row, table nor the container it is in. What went wrong? The right hand side is rendered on the outside of the table and causes the table to overflow 1px (width of the border) past the container size. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 65.0.3325.181 Channel: stable OS Version: 6.1 (Windows 7, Windows Server 2008 R2) Flash Version: See https://stackoverflow.com/questions/49600706/cell-border-expanding-total-tables-width/49601423?noredirect=1#comment86210666_49601423 Also: https://jsfiddle.net/fbwyx66o/4/
,
Apr 2 2018
Issue 827892 has been merged into this issue.
,
Apr 3 2018
Thanks for filing the issue! Able to reproduce the issue on reported chrome version 65.0.3325.181 and on the latest canary 67.0.3387.0 using Windows 10, Ubuntu 14.04 and Mac 10.13.1. As the issue is seen from M60(60.0.3072.0) considering it as Non-Regression and marking it as Untriaged. Hence requesting someone from "Blink>Layout" team to have a look into it.
,
Apr 4 2018
,
Apr 4 2018
Paraphrasing from my SO comment[1]: Edge/FF/Chrome all render jsfiddle.net/dgrogan/fbwyx66o/53 differently -- Edge cuts off right border, FF cuts off left, Chrome adds scrollbar that allows you to see both. The obvious behavior would be that both borders are visible (FF/Edge violate) without scrolling (Chrome violates). But from https://drafts.csswg.org/css2/tables.html#collapsing-borders: > UAs must compute an initial left and right border width for the table by examining the first and last cells in the first row of the table. -- 0px for both in this case > If subsequent rows have larger collapsed left and right borders, then any excess spills into the margin area of the table. -- The subsequent row has 1px collapsed borders in this case Notes to myself: I think the content width of the table is 200px because of its width:100%, the parent's width:200px, and the first row has no left/right border. (If the first row DID have a 1px border, the content width of the table would be 198 (or 199?) px.) The 1px borders on the second row are in the table's margin (or perhaps only 1/2 px on each side, not sure). Then I'm guessing that margins don't "count" toward triggering the scrollbar requested by overflow-x:auto. But that doesn't explain why FF/Edge clip one of the inline borders only when overflow-x:auto is specified. Perhaps overflow-x:auto dictates that everything is clipped except the border-box? When writing the w-p-t test, look up overflow:auto's details. [1] https://stackoverflow.com/questions/49600706/cell-border-expanding-total-tables-width/49601423?noredirect=1#comment86323192_49600706 |
||||
►
Sign in to add a comment |
||||
Comment 1 by vamshi.kommuri@chromium.org
, Apr 2 2018