...

View Full Version : Fixed width TD



odandezemaar
01-08-2013, 07:12 PM
Hello,

I would like to get a table (width = 99% of the page)
Inside that table there can be 5 TD's each 20% of the table's width.
When I only have 2 TD's the are stretched to 50% each. What am I doing wrong?

Thank you very much!

Frank.


<table width="99%" cellpadding="5" cellspacing="10" style="text-align:left;">
<TR>
<td valign="top" style="width:20%;background-color:#ffffff;border:solid 1px #7c9ba7;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" align="left" style="padding-bottom:2px;"><B>naam</B></a></td>
</tr>
<tr>
<td width="100%" align="left" style="padding-bottom:2px;">adres</td>
</tr>
<tr>
<td width="100%" align="left" style="padding-bottom:12px;">postcode</td>
</tr>
<tr>
<td width="100%" align="left">Doei!</td>
</tr>
</table>
</td>
<td valign="top" style="width:20%;background-color:#ffffff;border:solid 1px #7c9ba7;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" align="left" style="padding-bottom:2px;"><B>naam</B></a></td>
</tr>
<tr>
<td width="100%" align="left" style="padding-bottom:2px;">adres</td>
</tr>
<tr>
<td width="100%" align="left" style="padding-bottom:12px;">postcode</td>
</tr>
<tr>
<td width="100%" align="left">Doei!</td>
</tr>
</table>
</td>
</tr>
</table>

sunfighter
01-08-2013, 07:52 PM
I would not recommend putting a table inside of a table.
td's fill out the table width wise unless you give them a width. If you have two td's they will be 50% width. Only way that changes is if you over load one with more content than the td can take.

Start with this:

<table width="200px" border="1">
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>

Than change it ti this
<table width="200px" border="1">
<tr>
<td>text</td>
<td>a lot more text than you really need</td>
</tr>
</table>

And than to this
<table width="200px" border="1">
<tr>
<td width="100px">text</td>
<td>a lot more text than you really need</td>
</tr>
</table>

What your trying to do:



<table width="99%" border="1" cellpadding="5" cellspacing="10" style="text-align:left;">
<tr>
<td align="left" style="padding-bottom:2px;"><B>naam</B></td>
<td align="left" style="padding-bottom:2px;"><B>naam</B></td>
</tr><tr>
<td align="left" style="padding-bottom:2px;">adres</td>
<td align="left" style="padding-bottom:2px;">adres</td>
</tr><tr>
<td align="left" style="padding-bottom:12px;">postcode</td>
<td align="left" style="padding-bottom:12px;">postcode</td>
</tr><tr>
<td align="left">Doei!</td>
<td align="left">Doei!</td>
</tr>
</table>

odandezemaar
01-09-2013, 03:59 PM
Thank you for your reply!

The "problem" is: I don't know the amount of TD's. It can be 1 to 5.
When there are only 2 TD's, I would like to fill only 40% of the page.

sunfighter
01-10-2013, 03:37 PM
Thank you for your reply!

The "problem" is: I don't know the amount of TD's. It can be 1 to 5.
When there are only 2 TD's, I would like to fill only 40% of the page.

My answer was to try and explain how to use tables correctly. I'm not sure you should be using tables. I think your trying to use tables to make a layout and if that is correct you should look into using <div>'s to do that for you. Otherwise you might need to style five tables and pick which one to show based on the number of <td>'s you are showing.

Why not please your complete code and we'll take a look at it.

odandezemaar
01-14-2013, 02:01 PM
Hello Sunfighter,

Thank you for your reply! (Sorry for my late reaction, but I'm busy with completing our baby room)

A friend of me also told me to use div's, but I'm not very familiar with that.

What I'm trying to do is to display all the customers ("relaties" in Dutch) in blocks. I would like to give a block a 150 px. So in that case, the amount of blocks at one row depends on the width of the page (resolution).

If that is not possible, I would like to set a counter to 5, and after 5 blocks I start with a new row.

This is my code till now:


<?
$select = "SELECT * FROM relaties ORDER BY id";
$query = mysql_query($select);

if(mysql_num_rows($query) == 0)
{
echo "<div class=\"titel\">Empty</div>";
echo "<div class=\"bericht\">No relations yet.</div>";
}
else
{
echo "<P>";
echo "<div class=\"titel\" style=\"text-align:left;\">relaties</div>";
echo "<div class=\"bericht\" style=\"text-align:left;\">";
echo "<table width=\"99%\" cellpadding=\"5\" cellspacing=\"10\" style=\"text-align:left;\"><TR>";

while($list = mysql_fetch_object($query))
{
$j++;
?>
<td valign="top" style="width:20%;background-color:#ffffff;background-image:url('afbeeldingen/bgbuttons.gif');background-repeat:repeat-y;border:solid 1px #7c9ba7;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" align="left" style="padding-bottom:2px;"><a href="index.php?pag=relaties&actie=edit&id=<? echo $list->id;?>"><B><? echo $list->Naam;?></B></a></td>
</tr>
<tr>
<td width="100%" align="left" style="padding-bottom:2px;"><? echo $list->Adres;?></td>
</tr>
<tr>
<td width="100%" align="left" style="padding-bottom:12px;"><? echo $list->Postcode;?></td>
</tr>
<tr>
<td width="100%" align="left">(Tarief: € <? echo number_format($list->tarief, 2, ',', '');?>)</td>
</tr>
</table>
</td>
<?

if($j % 5 == 0)
echo "</tr><tr>";
}

echo "</tr></table>";
echo "</div>";
}
?>

linek98
01-14-2013, 07:28 PM
Use divs like this:


<div id="main">
<div style="width: 20%; float: left;">
<div class="row">
<table>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
<td>44444</td>
<td>55555</td>
</tr>
</table>
</div>
</div>
</div>
Where div of id "main" is your main storage div which will determine entire width of your listing.
First child div

<div style="width: 20%; float: left;">
Is the one we want to modify according to number of rows displayed (what you want to modify is just width property).
Div of "row" class is to make tables display below each other.

So basically what you want to do is check how many rows your SQL statement returned with mysql_num_rows function and calculate width of each div.


<?
$select = "SELECT * FROM relaties ORDER BY id";
$query = mysql_query($select);

$count = mysql_num_rows($query);
if($count == 0)
{
echo "<div class=\"titel\">Empty</div>";
echo "<div class=\"bericht\">No relations yet.</div>";
}
else
{
$width = floor(100 / (floor($count / 5) + 1));
echo "<P>";
echo "<div class=\"titel\" style=\"text-align:left;\">relaties</div>";
echo "<div class=\"bericht\" style=\"text-align:left;\">";
echo "<div id=\"main\">";
echo '<div style="width: '.$width;.'%; float: left;background-color:#ffffff;background-image:url("afbeeldingen/bgbuttons.gif");background-repeat:repeat-y;border:solid 1px #7c9ba7;">';

while($list = mysql_fetch_object($query))
{
$j++;
?>

<div class="row">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" align="left" style="padding-bottom:2px;"><a href="index.php?pag=relaties&actie=edit&id=<? echo $list->id;?>"><B><? echo $list->Naam;?></B></a></td>
</tr>
<tr>
<td width="100%" align="left" style="padding-bottom:2px;"><? echo $list->Adres;?></td>
</tr>
<tr>
<td width="100%" align="left" style="padding-bottom:12px;"><? echo $list->Postcode;?></td>
</tr>
<tr>
<td width="100%" align="left">(Tarief: <? echo number_format($list->tarief, 2, ',', '');?>)</td>
</tr>
</table>
</div>
<?

if($j % 5 == 0)
echo '</div><div style="width: '.$width;.'%; float: left;background-color:#ffffff;background-image:url("afbeeldingen/bgbuttons.gif");background-repeat:repeat-y;border:solid 1px #7c9ba7;">';

}

echo "</div></div>";
echo "</div>";
}
?>

It should do it's job but I did it on the fly so there might be some problems/typos. I'm still not sure about calculation of $width variable.

sunfighter
01-15-2013, 04:23 PM
@linek98 The idea was to eliminate tables altogether and use divs instead. Not put a table in a div.

@odandezemaar your last post works so we'll leave it like that. Only problem I ran into was your not defining $j.
So this might help you:


....
else
{
$j=0; // ADD THIS HERE
echo "<P>";
....

COBOLdinosaur
01-15-2013, 04:46 PM
Actually I not sure that a table is not appropriate. The data appears to be tabular and so a table is correct. However it is easier to control dimensions with divs so another way to do it might be div tags styled as table cells (http://coboldinosaur.com/pages/div-tab-art.html)

linek98
01-15-2013, 05:28 PM
I believe you should always use tables on data displayed in tabular form (there might be some exceptions but very few in my opinion). I think that divs acting like tables are misleading.

COBOLdinosaur
01-15-2013, 06:53 PM
divs acting like tables are misleading.

Then we need to remove about 70% of the CSS and 90% of the scripting from the Internet because the only stuff that is not "misleading" are plain old text documents like we did 15 years ago. All formatting and presentation enhancement change the character of the page. Limiting what properties you have in your toolkit is like giving a chef nothing but a frying pan and a knife.

Floats are not natural behavior, using percentages is "misleading" because that is not the real size. What nonsense.

linek98
01-15-2013, 08:37 PM
What I meant is making div acts EXACTLY like tables. Why use divs when you want to display data of your users in columns like name, e-mail, status, etc? Using tables is easier and makes more sense.

COBOLdinosaur
01-15-2013, 08:47 PM
Except that a div styled as a cell is not s redefinition of the div, it is a merging of properties of the td and div. The hybrid has some qualities of each. It is much easier to control height and width of a div, but easier to manage data positioning inside a table like structure.

Properties are not put in the standard without heavy lobbying from developers, manufacturers, and user groups who present use cases. The properties are there because if they were not there would need to be another tag that has the properties that result from applying display:table-cell to existing tags.

Cd&

odandezemaar
01-19-2013, 02:34 PM
Thank you very much for your help, with that help I realized it!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum