227400 - table inside div with overflow:auto gets compressed instead of causing scrollbars on the div

Status: RESOLVED INVALID

(Core :: Layout: Tables, defect)

Description

[Larry Ross]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.6b) Gecko/20031203
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.6b) Gecko/20031203

When a TABLE element is inside a DIV element, and the DIV has both a width set
and overflow: auto|hidden|scroll, then the table is squashed down ignoring COL
widths, and TD widths.

Reproducible: Always

Steps to Reproduce:
1.html fragment: 
<DIV style="overflow:auto;width: 100px">
   <TABLE><TR><TD style="width:150px">400px??</TD></TR></TABLE>
</DIV>

Actual Results:  
the table should be 150px wide, and the div, 100px.  So there should be
horizontal scroll bars, but there isn't.

Expected Results:  
Added a horizontal scrollbar to the div.

Comment 1

[Larry Ross]

Attachment: test case

Comment 2

[Larry Ross]

Changing table-layout to fixed makes no difference.  Setting col widths makes 
no difference.

Comment 3

[Bernd]

We render this as IE and opera.

Comment 4

[Larry Ross]

Attachment: This works in IE 6, but not in Moz

Simplified the testcase too much in my first submission.  With
table-layout:fixed, IE renders correctly, mozilla does not.

Comment 5

[Bernd]

It's no wonder that the last testcase differs on IE and moz. 

Moz follows strictly http://www.w3.org/TR/REC-CSS2/tables.html#fixed-table-layout

The table's width may be specified explicitly with the 'width' property. A value
of 'auto' (for both 'display: table' and 'display: inline-table') means use the
automatic table layout algorithm.

The w3c made a concession to microsoft so in CSS2.1 it became:

The table's width may be specified explicitly with the 'width' property. A value
of 'auto' (for both 'display: table' and 'display: inline-table') means use the
automatic table layout algorithm. However, if the table is a block-level table
('display: table') in normal flow, a UA may (but does not have to) use the
algorithm of 10.3.3 to compute a width and apply fixed table layout even if the
specified width is 'auto'.

Comment 6

[Larry Ross]

But looking at the same reference in w3 for fixed-table-layout:

The paragraph before the one you quote indicates that the width of the table is 
based on the table width AND the column widths:
   With this (fast) algorithm, the horizontal layout of the table 
   does not depend on the contents of the cells; it only depends 
   on the table's width, the width of the columns, and borders or 
   cell spacing. 

And the paragraphs after include:
   In the fixed table layout algorithm, the width of each column is 
   determined as follows:

   1. A column element with a value other than 'auto' for the 'width' 
   property sets the width for that column. 
   2. Otherwise, a cell in the first row with a value other than 'auto' 
   for the 'width' property sets the width for that column. If the cell 
   spans more than one column, the width is divided over the columns. 
   3. Any remaining columns equally divide the remaining horizontal table 
   space (minus borders or cell spacing). 

   The width of the table is then the greater of the value of the 'width'
   property for the table element and the sum of the column widths (plus 
   cell spacing or borders). If the table is wider than the columns, the 
   extra space should be distributed over the columns.

I interpret this to mean that by setting the td width in the first row I 
*should* be able to affect the table width.  No?

Comment 7

[Bernd]

Your assumption is wrong,

<table style="table-layout:fixed">
 <tr>
  <td style="width:400px">

does not invoke the fixed layout algorithm in mozilla. This is in perfect
compliance with css2 and css2.1. IE however uses the fixed layout algorithm.
This violates CSS2.0 and is somehow legal in CSS2.1 as you did not specify the a
floating or positioned table.

Comment 8

[Larry Ross]

Okay, so it invokes the Automatic table layout (http://www.w3.org/TR/REC-
CSS2/tables.html#auto-table-layout), the first sentence of which includes:
   ...the table's width is given by the width of its columns... 

And on calculating the column width:
   If the specified 'width' (W) of the cell is greater than MCW, W is 
   the minimum cell width. 

and then the width of the table is:
   If the 'table' or 'inline-table' element has 'width: auto', the 
   computed table width is the greater of the table's containing 
   block width and MIN. However, if the maximum width required by 
   the columns plus cell spacing or borders (MAX) is less than that 
   of the containing block, use MAX.

Which also seems to me to indicate that setting the column/cell widths should 
set the width of the table.

Comment 9

[Bernd]

No, I dont read this from the spec.
The containing block is smaller than the specified width of the table cell so
the auto table will grow till it reaches the width of the containing block as
the containing block is larger than the cell MCW.
Further the auto layout is only a recommendation. Before you try to specify a
col width, I am not aware of any browser that uses the specified col width as
MIN width if the specified colwidth is larger than the MCW of the cells. It
would be also very inconsistent with respect to cell specified widths.

Comment 10

[Boris Zbarsky [:bzbarsky]]

This is invalid; for auto-layout tables the behavior is correct (in the sense of being what the web expects; the spec for auto-layout tables is known to be bogus and is being rewritten).