Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13

Thread: Fixed width TD

  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fixed width TD

    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.

    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,303
    Thanks
    23
    Thanked 612 Times in 611 Posts
    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:
    Code:
    <table width="200px" border="1">
    <tr>
    <td>text</td>
    <td>text</td>
    </tr>
    </table>
    Than change it ti this
    Code:
    <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
    Code:
    <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:

    Code:
    <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>
    Last edited by sunfighter; 01-08-2013 at 07:58 PM. Reason: added What your trying to do:

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,303
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Quote Originally Posted by odandezemaar View Post
    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.

  • #5
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    PHP Code:
    <?
    $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->tarief2',''');?>)</td>
                    </tr>
                </table>
            </td>
            <?
            
            
    if($j == 0)
                echo 
    "</tr><tr>";
        }
        
        echo 
    "</tr></table>";
        echo 
    "</div>";
    }
    ?>

  • #6
    New Coder
    Join Date
    Dec 2012
    Location
    England
    Posts
    20
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Use divs like this:
    Code:
    <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
    Code:
    <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.
    PHP Code:
    <?
    $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->tarief2',''');?>)</td>
                    </tr>
                </table>
              </div>
            <?
            
            
    if($j == 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.

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,303
    Thanks
    23
    Thanked 612 Times in 611 Posts
    @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:
    Code:
    ....
    else
    {
    	$j=0;  // ADD THIS HERE
        echo "<P>";
    ....

  • #8
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #9
    New Coder
    Join Date
    Dec 2012
    Location
    England
    Posts
    20
    Thanks
    0
    Thanked 4 Times in 4 Posts
    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.

  • #10
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #11
    New Coder
    Join Date
    Dec 2012
    Location
    England
    Posts
    20
    Thanks
    0
    Thanked 4 Times in 4 Posts
    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.

  • #12
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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&
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #13
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much for your help, with that help I realized it!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •