Page 1 of 1
[solved]Small problem with tables (text makes table wider)..
Posted: Wed Jul 28, 2004 12:59 am
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...
Posted: Wed Jul 28, 2004 1:10 am
by kettle_drum
Posted: Wed Jul 28, 2004 8:54 am
by Draco_03
Post the code of your table so we could help you
Posted: Thu Jul 29, 2004 12:38 am
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...

Posted: Thu Jul 29, 2004 8:47 am
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.
Posted: Fri Jul 30, 2004 5:56 am
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...

Posted: Fri Jul 30, 2004 10:57 am
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..
Posted: Fri Jul 30, 2004 12:32 pm
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
Posted: Fri Jul 30, 2004 8:34 pm
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...
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"> </td>
</tr>
<tr>
<td colspan="10"> </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);?> <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))
{
echo('<option value="2">' . CONTACTMISBRUIK . '</option>');
}
else
{
echo('<option value="3" selected>' . CONTACTINFO . '</option>');
echo('<option value="2">' . CONTACTMISBRUIK . '</option>');
echo('<option value="1">' . CONTACTTECH . '</option>');
}
?>
</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);?> <?php echo(MAXVIJFHONDERDKARAKTERS);?></td>
<td class="blauw"></td>
<td colspan="2" class="blauw"><textarea name="c_bericht" class="textareacontact" onKeyUp="document.formsї0].teller.value=document.formsї0].c_bericht.value.length;"><?php
if (!empty($uid))
{
$tekst =CONTACTMISBRUIKTEKST1;
$tekst.= ' ' . $name . ' ';
$tekst.=CONTACTMISBRUIKTEKST2;
echo($tekst);
}?></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);?>
<input name="teller" type="text" size="3" maxlength="3" disabled="true"
value=""> <?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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </td>
</tr>
</table>
Posted: Mon Aug 02, 2004 9:07 am
by Draco_03
<span style='color:blue' title='I'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))
{
echo('<option value="2">' . CONTACTMISBRUIK . '</option>');
}
else
{
echo('<option value="3" selected>' . CONTACTINFO . '</option>');
echo('<option value="2">' . CONTACTMISBRUIK . '</option>');
echo('<option value="1">' . CONTACTTECH . '</option>');
}
?>
</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ї0].teller.value=document.formsї0].c_bericht.value.length;"><?php
if (!empty($uid))
{
$tekst =CONTACTMISBRUIKTEKST1;
$tekst.= ' ' . $name . ' ';
$tekst.=CONTACTMISBRUIKTEKST2;
echo($tekst);
}?></textarea></td>
</tr>
<tr>
<td align="left" valign="top"> </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"> </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 {
width: 660px;
height: 100%;
padding-left: 118px;
background-color: #ffffff;
}
</style>
Posted: Mon Aug 02, 2004 10:08 pm
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....
I appreciate it...
