Tom's Guide | Tom's Hardware | Tom's Games
![]() |
![]() |
![]() |
I have an HTML page which has a fairly wide table on it. I am trying to use CSS to set a fixed width for the table columns. This works if the overall table width is less than the width of the screen. However, if the table is wider than the screen, it doesn't seem to have any effect, the columns just seem to size themselves.
Does anyone know if there is a way to make the columns stay a fixed width regardless of whether the table goes off the screen or not?
Any ideas would be great.
Many Thanks

It would help if you supplied some of your code. If you are hard-coding the width of the columns, then there is no reason for them to change based on the size of the window - unless you are setting a relative width for the entire table (e.g. table width=80%).
In some rare instances you may need to work around the problem (however, I think yours doesn't need this). In those cases I create a row at the top or the bottom of the table. In each table cell I put a 1px X 1px transparent gif and size the width to the column width I want. The columns are then forced to be at least the width of the images.
Michael J

Thanks for your reply.
There's a sample table at this address:
http://gtw.cookhamreachsc.org/table/table.htmThe table is a results table for a sailing club's series of races, and is generated by the software our sailing club uses. The only way it lets you customise the output is by changing what is between the <style></style> tags.
What I'm aiming for is to try and make all the columns labelled R1, R2, R3... the same width. I've tried adding a width instruction into the stylesheet statement for td.maintdrace. This worked if the table was not wider than the screen, but as soon as the table became wider than the screen, it seemed to stop having any effect.
If you have any further ideas it would be much appreciated.
Thanks again.

Well, one part of the problem is that in the style sheet you have a class called "main" and then that style is used for both the body and for the table that you are having problems with.
Instead define body.mian and table.main separately. Then in table.main specify the exact width that the table should be (i.e. add up the fixed width of all the columns and set the table to that width).
I noticed other errors in the style sheet as well. For example all of the font settings look like this:
font: normal normal bold 8pt "Arial",Arial,Sans-Serif;
Why is the font-style (normal) listed three times. It is only using the first one listed. Also where you use "padding: 3px 3px 3px 3px;" you could replace it with "padding: 3px;".
Michael J

Thankyou very much!!! That's just what I needed. I hadn't thought of setting a width for the whole table as well as for individual columns.
As for the other errors, the style sheet was the default one used by the software and I was just trying to edit it, so thanks also for the suggestions to tidy it up.Thanks once again.

you should fix max width for 800px and not yet. 99% of users look at a brouser with 2 resolutions - 800x600 or 1024x768

![]() |
![]() |
![]() |

This post is quite old and has been locked from receiving new replies. Please create a new posting instead.
| Ads by Google |