The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Difficulty in getting a table to format correctly
Dave R
post Sep 17 2021, 06:51 AM
Post #1





Group: Members
Posts: 3
Joined: 17-September 21
Member No.: 28,096



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:

CODE
<table style = "border:4px solid black; border-collapse:collapse;">
            <tr style = "height:300px;">
                <td style = "border:2px solid black; width:400px;">A</td>
                <td colspan = 2 style = "border:2px solid black; width:400px;">B</td><!--colspan to allow the bottom row the chance to divide this cell -->
                <td style = "border:2px solid black; width:400px;">C</td>
            </tr>
            <tr style = "height:250px;">
                <td colspan = 4 style = "border:2px solid black; width:1200px;">D</td>
            </tr>
            <tr style = "height:150px;">
                <td colspan = 4 style = "border:2px solid black; width:1200px;">E</td>
            </tr>
            <tr style = "height:300px;">
                <td colspan=2 style = "border:2px solid black; width:600px;">F</td>
                <td colspan=2 style = "border:2px solid black; width:600px;">G</td>
            </tr>
        </table>

Any suggestions on how to get it to appear correctly would be very much appreciated. Thanks in anticipation,

Dave
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 17 2021, 07:52 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I probably don't understand, because the table looks as you describe it should. I don't see that anything is distorted. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dave R
post Sep 17 2021, 09:20 AM
Post #3





Group: Members
Posts: 3
Joined: 17-September 21
Member No.: 28,096



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 sad.gif

A bit more tinkering and if I change the code for line 4 (row 1 second td) to
CODE
<td colspan=2 style = "width:200px;">
it works as expected, i.e. the spanned cell is 400px wide and the dividing line between the two cells in the bottom row hit in the middle. But if I make the spanned middle cell 400, the dividing line from the bottom hits at around 800 px from the left. This is only necessary when the final row is present, i.e. it works as expected with a colspan of 2 and a width of 400px until the final line is added. It is as though the colspan=2 in the bottom row is reading as though it is spanning the first AND second cells even though the second cell is spanning two columns. blink.gif

This post has been edited by Dave R: Sep 17 2021, 10:17 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 17 2021, 11:06 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dave R
post Sep 17 2021, 12:00 PM
Post #5





Group: Members
Posts: 3
Joined: 17-September 21
Member No.: 28,096



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 18 2021, 04:10 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Me neither. I tested in several other browsers, only chromium misbehaved.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 01:05 AM