CODEWITHSUNDEEP
htmlcsswidthcss-tables
Suzan Cioc
Suzan Cioc

Reputation: 30137

Why table width is ignored?

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?

Upvotes: 13

Views: 22426

Answers (6)

David
David

Reputation: 76

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}

Upvotes: 2

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201866

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.

Upvotes: 24

tsnyder
tsnyder

Reputation: 1

Your css file could already be defining white-space: nowrap; which would prevent word wrapping.

Upvotes: 0

MC Emperor
MC Emperor

Reputation: 23047

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;

Upvotes: 4

jdigital
jdigital

Reputation: 12296

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.

Upvotes: 1

BenM
BenM

Reputation: 53246

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.

Upvotes: 9

Related Questions