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?
Answer
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.