<td width> not working

Dev Shed Forums Sponsor:

October 25th, 2012, 08:51 AM

lelales

Contributing User

Join Date: Mar 2008

Posts: 601

Time spent in forums: 4 Days 40 m 3 sec
Reputation Power: 37

<td width> not working

Hi, when I use javascript (say jQuery, or Scriptaculous, or Prototype) on my web page my Table formatting does not work.
For example, I would have

Code:

<td width="40">

But the width property doesn't work.

Does anyone know why this happens, and what the work around is? I know I could use CSS, but it's basically data in a table, and needs the <td>'s need to be a specific width.

thanks!
-

Last edited by lelales : October 25th, 2012 at 08:52 AM. Reason: typo

October 26th, 2012, 01:33 AM

Heatleakz

Registered User

Join Date: Oct 2012

Location: Stockholm, Sweden

Posts: 16

Time spent in forums: 6 h 27 m 22 sec
Reputation Power: 0

Quote:

Originally Posted by lelales

Hi, when I use javascript (say jQuery, or Scriptaculous, or Prototype) on my web page my Table formatting does not work.
For example, I would have

Code:

<td width="40">

Hi lelales,

To get a <td> element to hold it's given width you will need to specify the width attribute to 100% for the <table> element.

Code:

<table width="100%">
<tr>
<td width="40"></td>
</tr>
</table>

October 26th, 2012, 02:33 AM

davikerkrish

Registered User

Join Date: Sep 2012

Posts: 18

Time spent in forums: 4 h 11 m 40 sec
Reputation Power: 0

You can use the following code

<td style="width:40px;">

Then let me know with the result.

October 26th, 2012, 08:19 AM

lelales

Contributing User

Join Date: Mar 2008

Posts: 601

Time spent in forums: 4 Days 40 m 3 sec
Reputation Power: 37

Thanks hHeatleakz

I'll give a try later today.
Thanks so much!

Last edited by lelales : October 26th, 2012 at 08:57 AM. Reason: typo

October 26th, 2012, 08:53 AM

MauroEldritch

Contributing User

Join Date: Oct 2012

Location: Buenos Aires, Argentina

Posts: 64

Time spent in forums: 17 h 36 m 5 sec
Reputation Power: 1

Also, if you want to use relative values you can use:

<td style="width:40%;">

If you want a more accurate number:

<td style="width:40.5%;">

You may use the number you want and decimals. See ya.

October 26th, 2012, 08:57 AM

piperpam27

Contributing User

Join Date: Jun 2012

Posts: 47

Time spent in forums: 11 h 51 m 3 sec
Reputation Power: 1

Quote:

Originally Posted by Heatleakz

Hi lelales,

To get a <td> element to hold it's given width you will need to specify the width attribute to 100% for the <table> element.

Code:

<table width="100%">
<tr>
<td width="40"></td>
</tr>
</table>

Ummm...that's not true.

The following would work fine:

Code:

<table width="300">
    <tr>
        <td width="60">
            Foo
        </td>
        <td>
            Bar
        </td>
    </tr>
</table>

You just need to keep in mind a couple of simple rules.

1. Your specified td widths will not work if the sum of them all is less than (or greater than) than the specified width of the table. For example, if in the above example I told both of the TDs to be 20 pixels wide, then told the table to be 300 pixels wide--that would not add up, so it not display your specified TD widths. The standard work around for this is to have at least one TD with no specified width at all. This will cause all of the TDs with specified widths to work, and the extra will be shoved into the TD without a specified width.

2. You should style your tables with CSS.
Rather than using inline attributes for your TD widths, you should do it like this:

Code:

 
<table style="width: 300px;">
    <tr>
        <td style="width: 60px;">
            Foo
        </td>
        <td>
            Bar
        </td>
    </tr>
</table>

November 3rd, 2012, 04:35 AM

BrightIdea

Registered User

Join Date: Nov 2011

Posts: 31

Time spent in forums: 5 h 5 m 21 sec
Reputation Power: 0

Width is a horrid and bogus tag, not recognised by xhtml.

Learn CSS2

Regards

<td width> not working

Developer Shed Advertisers and Affiliates