Table Rows Misalignment

Thank you Elliott

This is how I had it originally, unfortunately, the same thing happens – I have changed it back so all cells are populated for you to look at, but the problem is the same. HTML tables are normally pretty good at aligned, so I don’t understand.

Many thanks

Andy

Thank you Elliott

I copied it into Quick CSS and it still doesn’t align properly. There are 6 rows and we need them to align properly across the 4 columns – just like a normal table in Excel.

Many thanks

Andy

Hello Elliot

I saw that you updated the code and copied that into Quick CSS. Afraid that it doesn’t work either. What next? Is there something fundamentally wrong I am doing? Surely a HTML table should automatically change the height of the cells etc in a row together when a browser is shrunk in size?

Many thanks

Andy

Thank you Elliot

How do I attach screenshots on this web interface? I could reply to your email, but it says (Email address hidden if logged out) . Is there an email address I can use.

I’ve created the two screenshots so can send them over. Essentially, just look at the row descriptions. ‘Weed examples (not exhaustive)’ should align with ‘Bracken’, ‘Bamboo’ and ‘Ground elder’ but it does not, it starts half way down. When you shrink your browser screen, the problem gets even worse as the first description columns compact onto 2 or 3 lines each!

Many thanks

Andy

Hello Elliott

Please see http://imgur.com/a/ulqbV

As you can see, I have added red lines where the headings should be – but they are not because of this alignment issue.

Hopefully you can now see the issue?

Andy

Thank you Andy

It is quite simple. Let me explain it with the screenshots.

You see there are 4 columns? The first column is a description of the other 3 columns.

If we take the first row, everything lines up – Weed category, ‘Average’ Weed, Woody Stem, Extensive Roots. Great.

If we take the second row, again, everything lines up – Treatment time (Less than 5cm), 0 to 1 seconds, 1 to 2 seconds, 1 to 2 seconds. Great.

If we take the third row, things start becoming misaligned. This is because the descriptive text is too long so goes onto two lines – Treatment time (between 5 and 30cm), 1 to 3 seconds, 2 to 5 seconds, 2 to 5 seconds. Not so great.

If we take the forth row, things start to become really messed up. The description is not on the same row. It should be – Treatment time (greater than 30cm), 3 to 5 seconds, 5 to 15 seconds, 5 to 15 seconds. However, it is not, the first column does not line up with the 2nd, 3rd and 4th columns.

If we take the first row, then things are completely misaligned. The description is – Treatment required. However, this is no where near the data it corresponds to – Single, Single and Multiple (2 or 3 times). You would expect these to be completely aligned. They are not.

The last row is the same as above. The description – Weed examples (not exhaustive) is no where near the data it corresponds to – It should vertically start with Bracken, Bamboo and Ground elder – it doesn’t.

Now, when you shrink your browser, then these all get worse as some data in cells moves onto 2 lines. Things become even more misaligned.

You would expect the rows of data in a table to all align, if one is two or three lines long, then all rows below it would move down.

Does that now make sense? If not, perhaps there is a number I could call to talk you through it. I am not being mad, I have programmed before with <tr> etc and know how tables should render.

Thank you

Andy

Hi Andy

I just changed it from the Pricing format to Data format. I did this because I googled ‘Enfold Table Alignment’ and it seems that it is a common problem. I am not 100% happy as the look and feel of your data format table is not very good. Ideally, I would prefer the Pricing format as it looks much nicer. If you can tell me how to fix it that way, I would be more than happy to change it back.

Many thanks

Andy

Thank you Andy.

To be honest, it appears that your table in Pricing format is not a table at all using columns and rows, hence why there are rendering issues. I would prefer to keep as it is rather than forcing it to behave in a certain way, which will inevitable not work in all scenarios and across all mediums. My suggest would be to allow you to change the format of your Data table – perhaps having an options to toggle the colour of columns//rows/cells, or to stop alternate row highlighting, etc.

Thank you

Andy