Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Table Widths Grrrrrrrrrrrrrr!!

Status
Not open for further replies.

sambo80

Technical User
Oct 4, 2005
11
GB
Hi

I'm on the verge of pulling my hair out :)

simple table code:

Code:
<table width=775 border="1">
  <tr>
      	<td width="200">sasasasasasasasadddddffffdddddd </td>
      	<td width=300>sasasasasssssssss</td>
		<td width=275>dsdsdsdsduuuuuuuuuuuuuuuuuuuuuuuuuuuuds</td>
  </tr>
</table>

But I want the table to always be fixed. If you fill up the cell with text, the widths will then start to increase. So instead of the table cell's height increasing so to speak, its widfth starts to increase.

I never want the table to be wider than 775px.

Any suggestions would be wholeheartedly appreciated :)

Thanks
 
There are two things I can see that might be causing a problem

Change all the width attributes to the format e.g. width="200px"

The other thing to mention is that all your text is one word try putting some spaces in the text then it will move on to the next line automatically.

If you are really trying to put words longer than 200px in a cell that you have defined as only being 200px wide it's not going to work the way you are expecting.
 
use stylesheets.

Code:
<table style="width: 775px;" border="1">
  <tr>
          <td style="width: 200px; overflow: auto;">sasasasasasasasadddddffffdddddd </td>
          <td style="width: 300px; overflow: auto;">sasasasasssssssss</td>
        <td style="width: 275px; overflow: auto;">dsdsdsdsduuuuuuuuuuuuuuuuuuuuuuuuuuuuds</td>
  </tr>
</table>

the overflow: auto will cause scrollbars to appear if the content is wider than the specified width. you can set overflow to "hidden" if you want the content to just not appear if it exceeds the width.



*cLFlaVA
----------------------------
[tt]( <P> <B>)13 * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
sorry, that's not specifically "stylesheets" as i described above, but inline CSS. if this suits you, we can work to making this a more contemporary and elegant approach.



*cLFlaVA
----------------------------
[tt]( <P> <B>)13 * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
First, let's correct what MrG has incorrectly advised: putting pixels after width would be erroneous, because the attributes in html can only take pixels or percentage, where no units means pixels and percentage sign means percentages.

Other than that, the advice on trying to put words that are too long into a table (cell) that is too small, will make the table (cell) expand. In order to avoid that you could try adding [tt]style="table-layout: fixed;"[/tt] to your table -- though I think that will not work. Failing that, you should then put [tt]overflow: hidden;[/tt] or [tt]overflow: auto;[/tt] on the columns that seem to be growing out of the proportion.

All that said, I would guess the problem is arising from your poor example text which is just one word instead of several like text usually is.
 
To force the table to be the same width regardless of the width of the content, use:
Code:
<table width="775px" style="table-layout:fixed">

Mike Krausnick
Dublin, California
 
I'll consider my wrists slapped.

guess I'll have to go through my old pages to see if I've done them right. Should kill a bit of time.
 
I'll consider my wrists slapped.
Don't worry about it, being wrong occasionally just helps us be more correct next time around :)

signature.png
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top