Dear All
I am attempting to complete a past paper question with my students. The question asks for a table 1200px wide,
the first row is made up of 3 x 400 x 300 cells
the second row is 1 x 1200 x 250 cell
the third row is 1 x 1200 x 150 cell
the fourth row is 2 x 600 x 300 cells.
Up to the final row, the table appears as expected - the fact the final row effectively divides the row in the centre means we would need to use a colspan in the first row so the middle cell is colspan=2. However, as soon as the final row goes in, the first and last row get distorted, and I can't get the two cells in the bottom row to balance correctly. Here's my code:
I probably don't understand, because the table looks as you describe it should. I don't see that anything is distorted.
Hi Pandy
Certainly in Google Chrome, when I view it, in the bottom row, the dividing line between cells is not in the centre. With a bit of experimenting, if you change the top row to four columns without the colspan and make the middle two only 200 wide, it works as expected, but beyond that, the dividing line in the bottom row seems to hit about 2/3 of the top middle cell, and that cell is distorted to look wider than the ones either side. I wish I could attach a screen grab, but it seems to want urls for images
A bit more tinkering and if I change the code for line 4 (row 1 second td) to
I don't have Chrome. But I have other chromium based browsers and in those the cells in the top don't have the same width. The middle one is larger than the the other two. But the bottom row is perfect.
It seems the problem with the top row goes away if you give the table a fixed width though (the sum of the width of the cells + borders).
Indeed it does! Thanks Pandy.
I am not sure why that should be necessary, as the total width of each row is 1200px anyway, but your suggestion provides a working solution.
Regards
Dave
Me neither. I tested in several other browsers, only chromium misbehaved.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)