Why table width is ignored?

html css width css-tables

17,815

Solution 1

The width setting is not ignored; it is just overridden, by the minimum requirements of cell contents. In each column, the longest word determines the smallest possible width. This is in accordance with CSS specifications: for a table, the width property is by default just a suggested minimum width.

“Smallest possible” is relative, though. You can enable word division in different ways. But to see where this would take you to, you can test by changing the <html> tag to <html lang=ru> and by adding the rule * { -moz-hyphens: auto } to your CSS and testing the page on Firefox. You will see the table formatted so that words are hyphenated and the width is as close to the declared width as you can get that way. It looks rather awful. The declared width is simply too small for the content.

Alternatively, try setting table { table-layout: fixed } in CSS. This will enforce the width, no matter what. And this will make cell content overflow out of the cells. I don’t think you’ll like this either.

I would thus suggest that you don’t try to enforce such a narrow width but rather remove the width setting entirely and enable hyphenation. The result looks relatively good. For hyphenation, I would suggest using Hyphenator.js, a JavaScript-based approach that works across browsers; CSS-based approach still has rather limited browser support.

Solution 2

Your problem is caused by the fact that the individual words in each cell of the table are too long, and you haven't specified how this should be dealt with.

Try adding:

word-break: break-all;

To your table.gridtable td rule.

Solution 3

It's because there are words in the table, which cannot be wrapped by default, thus the table cannot shrink. The effect will occur:

| verylongwordandsoon | anotherlongwordinrussian | justanotherword

If you try to set the font-size to 1px, you will see that the width is exactly 400 pixels.

However, in CSS3, the CSS property word-break can handle it.

word-break: break-all;

Solution 4

Applying this explicitly gave me the right result, width is respected, long text using new lines and height (instead width) expanding accordingly.

td { white-space:normal}

Solution 5

You can't make a table too small for its contents. You might try reducing the font size or trying a different layout (like using fewer columns).

Regarding your updated question: yes, you can add invisible word breaks (here's one example: How to Wrap unspaces word for Opera Browser) but this is really a last resort.

View more solutions

17,815

Author by

Suzan Cioc

Not to be offended

Updated on June 01, 2022

Comments

Suzan Cioc almost 2 years
I coded style in the following:
```
table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:14px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
        width: 400px;
}
```
and I see no overridings in Firebug. Nevertheless table width is computed as 812 px;

Why?

Actual page is here (in Russian): http://garmonia-znakomstva.ru/service.html

UPDATE

Can I add invisible word breaks, which would cause word breaking and hyphen if insufficient space and continuous word if enough space?