Display: table questions

I have some questions about display: table

1.) Must you use a row if there is just one?

2.) How does your browser determine the width of each of two columns?

In the code below, I can’t figure out how the widths are being set…

    <header id="masthead">
        <div id="company-info">
            <div id="brand">Mikey Consulting</div>
            <div id="tagline">Designing mobile websites...</div>
        <address id="company-addy">
            (206) 555-1212<br />
            Seattle, WA
    display: table;
    width: 100%;
    line-height: 1.2;

    display: table-cell;

3.) Any general advice to make my code responsive?


IF a table width is specified AND table-layout:fixed is applied, then the cells are of equal widths regardless of content.
IF no table width is applied, then the cells hug their contents.
IF a table width is specified and the default table-layout is used, the width of the cells is more-or-less proprtional to the width of the contents. Cells with wider contents being given more space at the right and left sides.


1 Like

It seems your last rule would apply, but that is not what I am seeing…

This is more of a nitpicking question, but just trying to be sure I understand how things work.

I recommend that you add visible outlines or borders to the cells and watch how the widths change in relation to the width of the contents.

I am using FireBug and I am also “eyeing” things.

The text on the left and right is fairly short, but I thought it looked fairly similar in length.

I guess I am getting bogged down with minor details. :smile:

The text on the right is shorter than the text on the left, so the right cell is smaller.
In addition to ronpat’s explanation, you can also set cell widths explicitly if you require it:-

#company-addy { width: 30%; }

Yes, but…

Widths assigned to table-cells are interpreted as min-width… they are “only a suggestion”, a starting point, and can change if content pushes them to change unless table-layout:fixed and a width is assigned to the display:table element. In that vein, the magic behind Paul’s ultimate sticky footer (that uses table-rows/cells) is the ability to assign a table-cell a height of 1px and rely on content to force it to extend.

I guess, but I wasn’t expecting that much of a difference in the two cells - one looks twice as wide as the other.

Yes, I tried that after seeing things looked unbalanced.

Well if you measure the text in your image, the tagline is about 200px and your phone number is about 110px, so yes, it’s about twice as wide :smile:

OK, but bear in mind what ronpat said about setting width too. Set table-layout: fixed on the parent to have full control.

Not sure what the reference to Paul is?

It is not a reference to Paul, but to his Ultimate Sticky Footer design that uses CSS table “elements” and depends on the standard table behavior whereby a cell with a height of 1px will extend to fit it contents.

It’s a practical, working example of that table behavior.

When I think about it, that default behaviour, where width acts as min-width may be useful in this case, making the layout responsive. It will space out the elements on the wide screen, then make more effective use of space when things get tight.

1 Like

You lost me on what you are advising…

You maybe don’t need to use table-layout: fixed when specifying cell width, it may work better without. Try it either way, see what works best.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.