Hi everyone,
My page is consisted of a table outlined with a “css style” script.
Both code and outcome is presented here:
My question is: Why title row’s colomns and second row’s columns have same width but second row
has a different width?
Thank you in advance.
The problem seems to be that you are trying to force the widths of the table columns with % values. But the values you have don’t add up to 100%, they only make 80%.
With tables, unless you go for the fixed layout, it generally best to let column widths take care of themselves as they will adapt to the content within them.
If you must force widths, be sure they add up to the total table width, or leave some undefined to remain fluid.
Hi,
It looks to me as though you are trying to make a table where the tbody element can scroll independently of the footer and header and the only way to do this is to set the tbody element to display:block and then set the inner tr to display:table and then give all tds the same width (which is what you seem to be attempting to do).
This effectively means that the inner part the (tbody) is like a separate table and has no relation to the header or footer. That’s why the widths are essential and must match up. usually this is not a good method for complicated data that is of variable length.
In your html you have missed the closing tr, the closing tbody and the tfoot element altogether.
I believe this is what you are trying to achieve but I feel there is too much data to do it nicely or without breaking.
Of course I am only guessing at what you want 
There are a number of validation errors that I for got to mention earlier.
Always validate your code. There is also a “Code Linting” tool on the right toolbar of that editor, though it does not seem to pick up everything.
A table will always make its cells add up to 100% even if you specify less than the total. Of course that means the width you set won’t match the widths you actually get if your math is flawed. However the cells in a table will always fill the table width unless of course you have an invalid number of cells in certain rows.
Looking at the code the OP posted then it seems that a scrolling middle section was required and in that case widths are essential to keep the header and footer cells the same width as the content cells otherwise they will not line up.
However if the op has blindly copied the code from somewhere else then it may be indeed that the scrolling middle section was not part of the overall plan
I’m truely grateful to you PaulOB, SamA74 and Eric_J.
Each of your suggestions causes the coulumns to be streight but PaulOB is right about my intentions to make the middle
part of the table scrolling while the title and footer lines remain fixed.
I’ll see to that when I get there. Maybe reading again your posts will serve me at that step…
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.