The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Table + colspan issues + CSS
andrewj
post Jun 19 2007, 02:42 AM
Post #1





Group: Members
Posts: 5
Joined: 19-June 07
Member No.: 3,119



Hi,

I have an alignment issue within my tables when I want to place a table/div within a TD spaning 4 columns. This problem only appears in IE!

Basically the first and last columns of the initial row will have a fixed width, and the middle columns resizing. The problem arises when the text in the table within the colspan row becomes large. The width of the fixed columns in the first row NO longer remain fixed! In Firefox this is not an issue, the alignment is as defined.


Here is an example of the problem

<table class="width100%">
<tr>
<td class="width200px">number</td>
<td>text</td>
<td>text</td>
<td class="width20px">icon</td>
</tr>
<tr>
<td colspan="4">
<table class="width100%">
<tr>
<td class="width200px">text</td>
<td>when this text is long alignment gets screwed up!</td>
<td>text</td>
</tr>
</table>
</td>
</tr>
</table>


Anyone any ideals?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 19 2007, 05:22 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(andrewj @ Jun 19 2007, 09:42 AM) *

This problem only appears in IE!

And in Opera I think.

QUOTE
Basically the first and last columns of the initial row will have a fixed width, and the middle columns resizing. The problem arises when the text in the table within the colspan row becomes large. The width of the fixed columns in the first row NO longer remain fixed! In Firefox this is not an issue, the alignment is as defined.

Try giving the outer table the style "table-layout: fixed". However this makes the "icon" text spill out of its cell, so be careful with the width values.

QUOTE
CODE
<table class="width100%">

Not sure if you can use percent characters in a class name. unsure.gif Anyway that class seems to be ignored by all my browsers, including Firefox, so you may want to use e.g. "width100percent" instead. Even more practical might be to use a class name that describes the content.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
andrewj
post Jun 20 2007, 01:37 AM
Post #3





Group: Members
Posts: 5
Joined: 19-June 07
Member No.: 3,119



Hi Christian,

Thanks for the help.

Adding this 'table-layout: fixed' normally works.
However in my situation it fixes the problem mentioned but actually causes another one. I am utilising a JS framework. I have created two Table rows. The first one will toggle the second row when clicked. The JS function will extend the second row to disply the data within (but only when clicked). With this table-layout: fixed style the second row no longer becomes visible when toggled as it is fixed with it's initial state!!

Is there a similar style which can be used for a TR?

As for the width100%, I was only using the class names as an example to show the widths I wanted to use. In my code I have proper class names :-)

This post has been edited by andrewj: Jun 20 2007, 01:51 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 20 2007, 06:07 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



Do you really need to use tables for this? Perhaps a CSS layout would avoid the problem.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
andrewj
post Jun 20 2007, 06:40 AM
Post #5





Group: Members
Posts: 5
Joined: 19-June 07
Member No.: 3,119



Good question!

The problem is there is a lot of data to be displayed and the best way to display such data is within a table. The toggling of additional data (div’s) within a table is not possible, so the only workaround is to create an empty row with a DIV and utilize the CSS to ‘hide’ this row until toggled. It works a treat, except for the alignment! And this table data is consistent with the rest of the site.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
andrewj
post Jun 21 2007, 03:35 AM
Post #6





Group: Members
Posts: 5
Joined: 19-June 07
Member No.: 3,119



Finally got it working by way of an ugly fix.
I set the class (fixed width) of the first and last columns in the first row. For the 2nd & 3rd columns I set the width to 75% and 25%. This pushes the two columns out towards the 1st and third respectively. Finally I set a class for the DIV within the 1st colum to the number of pixels I want it to have. The 4 column contains a checkbox. This appears to work fine in all browsers, definitely not Ideal but it allwos me to have my neat JS for the toggling of 'hidden' data in subsequest rows.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
andrewj
post Jun 21 2007, 03:37 AM
Post #7





Group: Members
Posts: 5
Joined: 19-June 07
Member No.: 3,119



Here is an example of the code

CODE

<table class="width100percent">
<tr>
<td class="widthfixed200px"><div style="width:200px">number</div></td>
<td width="75percent">text</td>
<td width="25percent">text</td>
<td class="width20px"><input type="checkbox"></td>
</tr>
<tr>
<td colspan="4">
<div class="toggle">
<table class="width100percent">
<tr>
<td>text</td>
<td>when this text is long alignment gets screwed up!</td>
<td>text</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 18th March 2024 - 10:36 PM