LebGeeks

Adnan

Member

[HTML / CSS ] Problem with table width

Hello,

Just for fun, I've recently made a Python script that creates a webpage with a table and a random color for each table cell.
The user is most importantly prompted to enter:
-The number of rows.
-The number of columns.
-The width of the cells.
-The height of the cells.
-Some random values.

All good, the script works great. The problem is in the table.
My screen resolution is 1366*768. It shouldn't be a problem if yours is a bit different.

Here's a generated 5rows*10cols table with 200px width and height with the table's width set to 100%:
https://dl.dropboxusercontent.com/u/972 … 00%25.html
All good.

Now the same, but without specifying a table width:
https://dl.dropboxusercontent.com/u/972 … width.html
Notice that the width of the table is fitting to the screen's width, shrinking the width specified by the user.

Conclusion: setting the width to 100% ? No ! Here's the second problem:

5rows*10cols table with 20px width and height without specifying a table width:
https://dl.dropboxusercontent.com/u/972 … width.html
All good.

5rows*10cols table with 20px widh and height with the table's width set to 100%:
https://dl.dropboxusercontent.com/u/972 … 00%25.html
Notice that the width of the table is fitting to the screen's width, enlarging the width specified by the user.

I've searched for a fix but it seems I couldn't search well enough.
Thanks in advance.

Ra8

Member

Re: [HTML / CSS ] Problem with table width

Well I tried this by trial and error... I couldn't find anything useful either.
Here is my solution keeping the table's width to 100% and the other CSS rules too:

body{display: table-caption;}

There might be better solutions.

Adnan

Member

Re: [HTML / CSS ] Problem with table width

I added your CSS thingy and it worked great ! But I couldn't understand what it actually does. But it just werks.
Thanks for explaining it if you have the time to.

Ra8

Member

Re: [HTML / CSS ] Problem with table width

I don't know what I did, I just got the result by trial and error.
I found another solution which I think is little better:
Keep the same code as your first solution and instead of setting the table's width to 100% set it to 0px.

Here is why (or how I understood it):
table-layout:fixed; obliges the width of the TD to be exactly as described in the style
If the combined width is greater than the width of the table it will exceed the page limit, else it will stay as it is.
So setting it to 100% won't work in the second case since the width is now larger than the combined width of the cells inside it.
And removing 100% won't work in the first place because (by default?) it stretches to the page's limits

Check this link for more details: http://css-tricks.com/fixing-tables-long-strings/