How is table layout fixed rendered?


Tags: html,css,css3

Problem :

How is table layout fixed rendered? According to 17.5.2.1 "Fixed table layout" (from W3):

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 determines the width for that column.

I take it that first we check the width of the col element, and if it's set to something like 100px then we use it and nothing else. However the following layout proves me wrong. It's as if the browser calculates MAX(col.width, first-td.width). What am I missing here? Did I misunderstand the W3 definition? Thanks

Fiddle:

http://jsfiddle.net/91qozmnb/

HTML:

<table>
    <colgroup>
        <col />
        <col />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <td>test1
            </td>
            <td>test2
            </td>
            <td>test3
            </td>
        </tr>
    </tbody>
</table>

CSS:

table
{
    table-layout:fixed;
    border-spacing:0px;
}
table > colgroup > col:nth-child(1)
{
    width:100px;
}
table > colgroup > col:nth-child(2)
{
    width:150px;
}
table > colgroup > col:nth-child(3)
{
    width:200px;
}
table > tbody > tr > td
{
    border:5px solid lightgray;
    padding:0px;
    box-sizing:border-box;
}
table > tbody > tr > td:nth-child(1)
{
    width:200px;
}
table > tbody > tr > td:nth-child(2)
{
    width:150px;
}
table > tbody > tr > td:nth-child(3)
{
    width:100px;
}


Solution :

Reading further in the spec, you will find

17.5.2.1 Fixed table layout

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.

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) ...

So, if you want to make sure that fixed table layout is used at all, set the width property of the table


    CSS Howto..

    How to scale a fixed-width website to an iPad viewport

    how to use namespaces in css?

    How can the common text message format be replicated purely with CSS?

    Pure CSS: Show image2 above/over/on top image1 on hover

    How to disable
    tags inside
    by css?

    How come the links in my footer section remain purple and underlined even when I use CSS to change that

    JQuery/CSS - How i can set imagem full size of div

    How to use the CSS pseudo element :before in multiple classes of same element

    How to copy external CSS and JavaScript in XSLT

    How to expand toggle sidebar more

    Some doubts about how make an image clickable using CSS

    How to delete HTML Elements in an iFrame using JavaScript

    CSS how to fill remaining space (1 div with smaller divs)

    How do I use a wildcard asterisk CSS selector in SASS? [closed]

    CSS: How to get position and size relative to screen width?

    How do I apply CSS style to ASCII character

    how to create a css translateY on hover effect

    how to add bootstrap, css, images ,js into google app engine?

    How to prevent embedded video from linking to another web page

    How to get names of css classes of an element

    how to change height of div to covered the text area (CSS)

    How to make a box with arrow in CSS?

    How do I get CSS mediaqueries to work with jQuery $(window).innerWidth()?

    CSS selector: how to make 2 spans each fill 50% of their parent's width?

    How to apply a CSS class to all instances of a control in ASP.NET

    Twitter Bootstrap with responsive design — How to style own, non-framework elements [closed]

    how to make a h2 background image 'dynamic' in height as well

    How to create a Vertical Strikethrough in CSS?

    How to create different and unique ID for some class in css?

    How to keep active menu item underlined?