[solved]Small problem with tables (text makes table wider)..

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
dreamline
Forum Contributor
Posts: 158
Joined: Fri May 28, 2004 2:37 am

[solved]Small problem with tables (text makes table wider)..

Post by dreamline »

Hi all,
I'm having some trouble with a table... It can be solved if i use 2 seperate tables, but maybe one of you has an easy solution.. :)

K, here's the problem.. I created a table of about 660 px wide then i split it up in rows and ofcourse cells... Now if i put some text in a cell then it's no problem, but if i want to put a lot of text so that the table expands vertical it also expands a bit horizontal... The main problem is because i'm creating a multi language website. So the same table is used dynamically for those 3 languages...

Is there a trick so that the table doesn't grow wider depending on the length of text you put in a cell?

Thanks for any help...
Last edited by dreamline on Sun Aug 07, 2005 5:15 am, edited 1 time in total.
kettle_drum
DevNet Resident
Posts: 1150
Joined: Sun Jul 20, 2003 9:25 pm
Location: West Yorkshire, England

Post by kettle_drum »

Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post by Draco_03 »

Post the code of your table so we could help you
dreamline
Forum Contributor
Posts: 158
Joined: Fri May 28, 2004 2:37 am

Post by dreamline »

I'll give it a go with css first... If that doesn't work then i'll post some code... :) Thanks for reacting guyz... :D
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post by Draco_03 »

I think that your problem is white the way you size your table (and cell). A table shouldn't need an overflow, it's a mistake that's been made elsewhere.

Of course, I speak in general.
dreamline
Forum Contributor
Posts: 158
Joined: Fri May 28, 2004 2:37 am

Post by dreamline »

I have defined my tables absolute... I'm not using any kind of overflow (i didnt set it)..

The text inside the table wraps, however it's seems to wrap it at the wrong word and that's the reason for my shift in tables... If i remove the text that doesn't fit on 1 line in a cell then my tables/cells work perfectly, but if i put more text in the cell so that i get a 2nd or 3rd line with text then my table starts widening left and rigt.. :(

I haven't tried the CSS overflow thing yet, but i will this weekend... :)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

you could artificially insert <wbr> into the long text, which will give a hint to the brower it can wrap at that point. You may be able to use the [php_man]soundex[/php_man]() or it's friends' abilities to automatically add it at syllable marks..
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post by Draco_03 »

but i think it could be fixed just be actually making a proper table, or maybe the table is good but something is just not well coded.
I had this problems often befor and at first it took me a lonmg time to fix it, but now I find them as I code (since i test all my new addition) so it's easier to find the problem.

PS : you still didn't post any code
dreamline
Forum Contributor
Posts: 158
Joined: Fri May 28, 2004 2:37 am

Post by dreamline »

Sorry for not posting the code yet, but i was at work at the time...

So here is the partial code i created... I'm using tables inside tables but this part of the code is only one table.. :)

The problem areas are:
CONTACTMISBRUIKVOORBLD
CONTACTINFOVOORBLD
CONTACTTECHVOORBLD
These texts are a bit long and are printed on multiple lines which makes the table shift... The shift of the cells only occur when i change languages.
Seems that it doesn't wrap the text properly and i think one of the wraps occurs at the wrong place.. :(

Once again thanks for any help... :D

Code: Select all

<td width="660" valign="top"><table width="660" border="0" cellspacing="0" cellpadding="0" class="verdana">
          <form class="verdana" name="form3" method="post" action="index.php" onSubmit="return contact(document.object,this);">


              <tr> 
                <td colspan="10">&nbsp;</td>
              </tr>
			  <tr>
			  <td colspan="10">&nbsp;</td>
			  </tr>

              <tr> 
                <td></td>
                <td colspan="9"><div align="left"><b><?php echo(CONTACTFORMULIER);?></b></div></td>
              </tr>

              <tr> 
                <td width="119" height="1"></td>
                <td width="1" class="zwart"></td>
                <td width="10" class="zwart"></td>
                <td width="100" class="zwart"></td>
                <td width="1" class="zwart"></td>
                <td width="294" class="zwart"></td>
                <td width="5" class="zwart"></td>
                <td width="10" class="zwart"></td>
                <td width="1" class="zwart"></td>
                <td width="119"></td>
              </tr>
              <tr> 
                <td height="10"></td>
                <td class="zwart"></td>
                <td class="blauw"></td>
                <td colspan="4" class="blauw"></td>
                <td class="blauw"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr>
                <td></td>
                <td class="zwart"></td>
                <td class="blauw"></td>
                <td colspan="4" class="blauw">
				</td>
                <td class="blauw"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="blauw"></td>
                <td colspan="4" class="blauw"></td>
                <td class="blauw"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td height="1"></td>
                <td class="zwart"></td>
                <td class="blauw"></td>
                <td colspan="2" class="wit"></td>
                <td colspan="2"></td>
                <td class="blauw"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="blauw"></td>
                <td class="blauw"><?php echo(VAN);?></td>
                <td class="blauw"></td>
                <td colspan="2" class="blauw"><input type="text" name="c_van" class="listtext"></td>
                <td class="blauw"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td height="1"></td>
                <td class="zwart"></td>
                <td class="blauw"></td>
                <td colspan="2" class="wit"></td>
                <td colspan="2"></td>
                <td class="blauw"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="blauw"></td>
                <td class="blauw"><?php echo(GEBREMAILADRES);?>&nbsp;<span class="rood">*</span></td>
                <td class="blauw"></td>
                <td colspan="2" class="blauw"><input type="text" name="c_email" class="listtext"
                value=""></td>
                <td class="blauw"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td height="1"></td>
                <td class="zwart"></td>
                <td class="blauw"></td>
                <td colspan="2" class="wit"></td>
                <td colspan="2"></td>
                <td class="blauw"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="blauw"></td>
                <td class="blauw"><?php echo(ONDERWERP);?></td>
                <td class="blauw"></td>
                <td colspan="2" class="blauw"><select name="c_onderwerp" class="listtext">
<?php	    
	    if (!empty($uid))
	    	&#123;
	    		echo('<option value="2">' . CONTACTMISBRUIK . '</option>');

	    	&#125;
	    	else
	    	&#123;
		    echo('<option value="3" selected>' . CONTACTINFO . '</option>');
		    echo('<option value="2">' . CONTACTMISBRUIK . '</option>');
	    	echo('<option value="1">' . CONTACTTECH . '</option>');
		&#125;
?>	
                  </select></td>
                <td class="blauw"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td height="1"></td>
                <td class="zwart"></td>
                <td class="blauw"></td>
                <td colspan="2" class="wit"></td>
                <td colspan="2"></td>
                <td class="blauw"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="blauw"></td>
                <td valign="top" class="blauw"><?php echo(BERICHT);?>&nbsp;<?php echo(MAXVIJFHONDERDKARAKTERS);?></td>
                <td class="blauw"></td>
                <td colspan="2" class="blauw"><textarea name="c_bericht" class="textareacontact" onKeyUp="document.forms&#1111;0].teller.value=document.forms&#1111;0].c_bericht.value.length;"><?php
	    if (!empty($uid))
	    	&#123;
	    		$tekst =CONTACTMISBRUIKTEKST1;
	    		$tekst.= ' ' . $name . ' ';
	    		$tekst.=CONTACTMISBRUIKTEKST2;
	    		echo($tekst);
	    	&#125;?></textarea></td>
                <td class="blauw"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td height="1"></td>
                <td class="zwart"></td>
                <td class="blauw"></td>
                <td colspan="2" class="wit"></td>
                <td colspan="2"></td>
                <td class="blauw"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="blauw"></td>
                <td class="blauw"></td>
                <td class="blauw"></td>
                <td colspan="2" class="blauw"><?php echo(BERICHTLENGTE);?>&nbsp;
                <input name="teller" type="text" size="3" maxlength="3" disabled="true"
                value="">&nbsp;<?php echo(KARAKTERS);?></td>
                <td class="blauw"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td height="1"></td>
                <td class="zwart"></td>
                <td class="blauw"></td>
                <td colspan="2" class="wit"></td>
                <td colspan="2"></td>
                <td class="blauw"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td height="10"></td>
                <td class="zwart"></td>
                <td class="blauw"></td>
                <td colspan="4" class="blauw"></td>
                <td class="blauw"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td height="1"></td>
                <td class="zwart"></td>
                <td class="zwart"></td>
                <td colspan="2" class="zwart"></td>
                <td colspan="2" class="zwart"></td>
                <td class="zwart"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td colspan="10">&nbsp;</td>
              </tr>
              <tr> 
                <td colspan="9"><div align="right"> 
                    <input type="submit" name="b1" value="<?php echo(VERSTUREN);?>" onClick="document.object=this" class="buttons">
                  </div></td>
                <td></td>
              </tr>
			  <tr>
			  <td colspan="10">&nbsp;</td>
			  </tr>

              <tr> 
                <td></td>
                <td colspan="9"><b><?php echo(CONTACTEMAILADRESSSEN);?></b></td>
              </tr>

              <tr> 
                <td height="1"></td>
                <td class="zwart"></td>
                <td class="zwart"></td>
                <td class="zwart"></td>
                <td class="zwart"></td>
                <td class="zwart"></td>
                <td class="zwart"></td>
                <td class="zwart"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td height="10"></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="4" class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="4" class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td height="1"></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="2" class="wit"></td>
                <td colspan="2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="3" class="bruinig2">&nbsp;</td>
                <td class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="3" class="bruinig2"><b><?php echo(CONTACTTECH);?></b></td>
                <td class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="3" class="bruinig2"><?php echo(CONTACTTECHVOORBLD);?></td>
                <td class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="3" class="bruinig2"><a href="mailto:<?php echo(CONTACTTECHEMAIL);?>"><?php echo(CONTACTTECHEMAIL);?></a></td>
                <td class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="3" class="bruinig2">&nbsp;</td>
                <td class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              
              <tr> 
                <td height="1"></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="2" class="wit"></td>
                <td colspan="2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="3" class="bruinig2">&nbsp;</td>
                <td class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>


              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="3" class="bruinig2"><b><?php echo(CONTACTINFO);?></b></td>
                <td class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="3" class="bruinig2"><?php echo(CONTACTINFOVOORBLD);?></td>
                <td class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="3" class="bruinig2"><a href="mailto:<?php echo(CONTACTINFOEMAIL);?>"><?php echo(CONTACTINFOEMAIL);?></a></td>
                <td class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="3" class="bruinig2">&nbsp;</td>
                <td class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td height="1"></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="2" class="wit"></td>
                <td colspan="2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="3" class="bruinig2">&nbsp;</td>
                <td class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>


              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="3" class="bruinig2"><b><?php echo(CONTACTMISBRUIK);?></b></td>
                <td class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="3" class="bruinig2"><?php echo(CONTACTMISBRUIKVOORBLD);?></td>
                <td class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="3" class="bruinig2"><a href="mailto:<?php echo(CONTACTMISBRUIKEMAIL);?>"><?php echo(CONTACTMISBRUIKEMAIL);?></a></td>
                <td class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="3" class="bruinig2">&nbsp;</td>
                <td class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td height="1"></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="2" class="wit"></td>
                <td colspan="2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>

              <tr> 
                <td height="10"></td>
                <td class="zwart"></td>
                <td class="bruinig2"></td>
                <td colspan="4" class="bruinig2"></td>
                <td class="bruinig2"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td height="1"></td>
                <td class="zwart"></td>
                <td class="zwart"></td>
                <td colspan="2" class="zwart"></td>
                <td colspan="2" class="zwart"></td>
                <td class="zwart"></td>
                <td class="zwart"></td>
                <td></td>
              </tr>
              <tr> 
                <td colspan="10">&nbsp;</td>
              </tr>
            </table>
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post by Draco_03 »

<span style='color:blue' title='I&#39;m naughty, are you naughty?'>smurf</span>..
err okay would you consider remaking your table!.
It is a mess to work with. You usually never use colspan or rowspan. (if you can)
try this code (much cleaner and will load much faster)

Code: Select all

<div id="a1">
<strong><?php echo(CONTACTFORMULIER);?></strong> 
  <table width="660" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td align="left" valign="top"><?php echo(VAN);?></td>
      <td><input type="text" name="c_van" class="listtext"></td>
    </tr>
    <tr> 
      <td align="left" valign="top"><?php echo(GEBREMAILADRES);?>*</td>
      <td><input type="text" name="c_email" class="listtext" value=""></td>
    </tr>
    <tr> 
      <td align="left" valign="top"><?php echo(ONDERWERP);?></td>
      <td><select name="c_onderwerp" class="listtext">
<?php      
       if (!empty($uid))
          &#123;
             echo('<option value="2">' . CONTACTMISBRUIK . '</option>');

          &#125;
          else
          &#123;
          echo('<option value="3" selected>' . CONTACTINFO . '</option>');
          echo('<option value="2">' . CONTACTMISBRUIK . '</option>');
          echo('<option value="1">' . CONTACTTECH . '</option>');
      &#125;
?>   
                  </select></td>
    </tr>
    <tr> 
      <td align="left" valign="top"><?php echo(BERICHT);?> <?php echo(MAXVIJFHONDERDKARAKTERS);?></td>
      <td><textarea name="c_bericht" class="textareacontact" onKeyUp="document.forms&#1111;0].teller.value=document.forms&#1111;0].c_bericht.value.length;"><?php
       if (!empty($uid))
          &#123;
             $tekst =CONTACTMISBRUIKTEKST1;
             $tekst.= ' ' . $name . ' ';
             $tekst.=CONTACTMISBRUIKTEKST2;
             echo($tekst);
          &#125;?></textarea></td>
    </tr>
    <tr> 
      <td align="left" valign="top">&nbsp;</td>
      <td><?php echo(BERICHTLENGTE);?> <input name="teller" type="text" size="3" maxlength="3" disabled="true"
                value=""> <?php echo(KARAKTERS);?></td>
    </tr>
    <tr>
      <td align="left" valign="top">&nbsp;</td>
      <td align="right"><input type="submit" name="b1" value="<?php echo(VERSTUREN);?>" onClick="document.object=this" class="buttons"></td>
    </tr>
  </table>
  <br />
  <br />
  <strong><?php echo(CONTACTEMAILADRESSSEN);?></strong>
  <table width="660" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td><strong><?php echo(CONTACTTECH);?></strong></td>
  </tr>
  <tr>
      <td><?php echo(CONTACTTECHVOORBLD);?></td>
  </tr>
  <tr>
      <td><a href="mailto:<?php echo(CONTACTTECHEMAIL);?>"><?php echo(CONTACTTECHEMAIL);?></a></td>
  </tr>
  <tr>
      <td><b><?php echo(CONTACTINFO);?></b></td>
  </tr>
  <tr>
      <td><?php echo(CONTACTINFOVOORBLD);?></td>
  </tr>
  <tr>
      <td><a href="mailto:<?php echo(CONTACTINFOEMAIL);?>"><?php echo(CONTACTINFOEMAIL);?></a></td>
  </tr>
  <tr>
      <td><b><?php echo(CONTACTMISBRUIK);?></b></td>
  </tr>
  <tr>
      <td><?php echo(CONTACTMISBRUIKVOORBLD);?></td>
  </tr>
  <tr>
      <td><a href="mailto:<?php echo(CONTACTMISBRUIKEMAIL);?>"><?php echo(CONTACTMISBRUIKEMAIL);?></a></td>
  </tr>
</table>

</div>
You have to add this style in the head of your document

Code: Select all

<style type="text/css">
#a1 &#123;
	width: 660px;
	height: 100%;
	padding-left: 118px;
	background-color: #ffffff;
&#125;
</style>
dreamline
Forum Contributor
Posts: 158
Joined: Fri May 28, 2004 2:37 am

Post by dreamline »

Thanks for your point of view.. And i'll definately will take a look at the code... :)

I can't really avoid the colspan or rowspan since some cells have to be multiple rows or have to be multiple columns... To keep everything on the site in the same layout / positions this is the page i use and adjust it to the needs of my site...

I'll have a look at your code and see if i can use it... Thanks for taking the time to look at the code.... :D

I appreciate it... :D
Post Reply