Table + colspan issues + CSS |
Table + colspan issues + CSS |
andrewj |
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? |
Christian J |
Jun 19 2007, 05:22 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,628 Joined: 10-August 06 Member No.: 7 |
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. 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. |
andrewj |
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 |
Christian J |
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.
|
andrewj |
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. |
andrewj |
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. |
andrewj |
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> |
Lo-Fi Version | Time is now: 18th March 2024 - 10:36 PM |