www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: i want to divide <table> into 8 columns

  1. #1
    Join Date
    Aug 2007
    Posts
    52

    i want to divide <table> into 8 columns

    i want to divide <table> into 8 columns ( i.e <td>'s ) equally spaced,so that the table spans the whole screen ....i dont want scrollbar.

    how its done ?

    i believe , total screen width =100% ..right ?

    <td width="12%">nhgjg</td>
    <td width="12%">fghfh</td>
    <td width="12%">fghfgh</td>
    .........................
    <td width="12%">fghfgh</td> //8th table .

    technically , i want <td> no 5 and <td> no 7 bit more wider than other tds ....is it possible ?

    However, i dont want any scorollbar to come up if there are longer texts in any <td>

    how to do it ?

  2. #2
    Join Date
    Jan 2004
    Posts
    377
    how about
    <table width=100%>
    <tr>
    <td width=12%>
    <td width=13%
    <td width=12%>
    <td width=13%
    .....
    .....
    <tr>

    chancea are you will never notice the difference

    or if they have to be exact

    <table width=96%>
    <tr>
    <td width=12%>
    <td width=12%
    <td width=12%>
    <td width=12%
    .....
    .....
    <tr>
    Last edited by DARTHTAMPON; 10-03-2007 at 09:13 AM.

  3. #3
    Join Date
    Aug 2007
    Posts
    52
    i already have a 100% as table width.

    currently i have code somewhat like this...

    Code:
    <table id="table1"  width="100%" align="center" cellpadding="0" cellspacing="0" onMouseOver="setTableName(id)" border="1" bordercolor="#000000">
    										<tr >
    											<td width="160" class="borderRight" height="19">data1</td>
    											<td width="185" class="borderRight" >data2</td>
    											<td width="160" class="borderRight">data3</td>
    											<td width="160" class="borderRight">data4</td>
    											<td width="275" class="borderRight">data5</td>
                                                <td width="160" class="borderRight">data6</td>
    											<td width="160" class="borderRight">data7</td>
                                                <td width="160" class="borderRight">data8</td>
    
    										</tr>


    do i need to modify it ? what should i write ?

    i just gave you relevant code snippet to understand how my table is structured .

    please advice

    thanks

  4. #4
    Join Date
    Aug 2007
    Posts
    52
    DARTHTAMPON ,

    i believe i need to use % in the td's width.

    and all the sum of td's width is should be added to 100% ...right ?

  5. #5
    Join Date
    Jan 2004
    Posts
    377
    change your td widths to percentages as well. no need to use absolute numbers

  6. #6
    Join Date
    Jan 2004
    Posts
    377
    Quote Originally Posted by sun_rise
    DARTHTAMPON ,

    i believe i need to use % in the td's width.

    and all the sum of td's width is should be added to 100% ...right ?
    yes except they have to be whole numbers so if you drop your table size down to 96 you wont have any issues with making them all 12. if you keep 100 you can alternate between 12 and 13 and probably no one will know the difference.

  7. #7
    Join Date
    Aug 2007
    Posts
    52
    ok.

    i have decided 6 td's with 10% width each.

    2 td's with 20% each

    so, 6*10 +2*20 =100

    I think ,10% and 20% will now make a bit difference .

    i'll check this...and let you know.

  8. #8
    Join Date
    Aug 2007
    Posts
    52
    damn!.....its not working.

    i have seen the view source ...they are set to 10% and 20% and sum is 100% ...but still i am getting scrollbar !!!

    it did not work.

    can someone, please post a demo code .

    i would like to implement that.

  9. #9
    Join Date
    Aug 2007
    Posts
    52
    is this a wrong process ?

    someone please advice

  10. #10
    Join Date
    Aug 2007
    Posts
    295
    What are you putting in the cells? images, long words? These cells will automatically stretch if they have to to accomodate things.

    btw, I've used this and it has worked: 12.5%
    Last edited by harumph; 10-03-2007 at 10:45 AM.

  11. #11
    Join Date
    Aug 2007
    Posts
    52
    harumph,

    yes...i am putting long words in cells .

    in fact those long words are coming into the page dynamically.

    and as a result the columns are getting stretched and a scrollbar is coming up.


    see, i have made a small example here.

    i have divided the 100% in 4 columns, each 25%.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD>
    
    <BODY>
     <table width="100%" border="1">
    
    <tr>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    </tr>
    
    <tr>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    </tr>
    
    <tr>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    </tr>
    
    <tr>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    </tr>
    
    <tr>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    </tr>
    
    <tr>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    </tr>
    
    <tr>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    </tr>
    
    <tr>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    </tr>
    
    <tr>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    </tr>
    
    <tr>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    </tr>
    
    <tr>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    </tr>
    
    <tr>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    </tr>
    
    <tr>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Heregdgdgdhffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    </tr>
    
    <tr>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    <td valign="top" width="25%">Left Nav Links Here</td>
    <td valign="top" width="25%">Body Here</td>
    </tr>
    
    </table> 
    </BODY>
    </HTML>
    Now purposefully, i have put a long word in one of the cell , and i see the columns got stretched and scrollbar comes up.


    So, how do we come around this problem ?

    it looks bad....i want the column of fixed width . ....so if there is a long word coming dynamically then it should come into thenext line ...i.e i want it wrapped.

    How do we do it ?

    thanks

  12. #12
    Join Date
    Aug 2007
    Posts
    295
    How are you populating these cells? With variables, correct? What are you using; PHP, ASP, JSP? You might be able to adjust your data before it hits the cells.
    Last edited by harumph; 10-03-2007 at 05:42 PM.

  13. #13
    Join Date
    Jul 2005
    Location
    USA
    Posts
    912
    You can also just do:

    Code:
    <table border="1" width="100%" cols="8">
    <tr>
       <td>1</td>
       <td>2</td>
       <td>3</td>
       <td>4</td>
       <td>5</td>
       <td>6</td>
       <td>7</td>
       <td>8</td>
    </tr>
    </table>

  14. #14
    Join Date
    Aug 2007
    Posts
    295
    Webnerd, I think his prob is that he has long strings that get populated dynamically within the cells and it automatically stretches the cell (see his last post).

    My suggestion was to [possibly] adjust the data before it hits the cell, perhaps throwing in a \n or <br> into the string at a certain character count.
    Something like that.

  15. #15
    Join Date
    Jul 2005
    Location
    USA
    Posts
    912
    No way around it then. In order for CSS to perform a hyphenation of a sort, you need a dictionary. We have the same issues with XSL:FO when generating hard copies of documents. You can always just hide the overflow:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="en" lang="en">
    <head>
       <title> new document </title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
       <style type="text/css" media="all">
       /*<![CDATA[*/
    
       td div.data{overflow:hidden;}
       
       /*]]>*/
       </style>
    
       <script type="text/javascript">
       //<![CDATA[
       //]]>
       </script>
    </head>
    
    <body lang="en">
    
    <table border="1" width="100%" cols="8">
    <tr>
       <td width="12.5%"><div class="data">sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda</div></td>
       <td width="12.5%"><div class="data">sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda</div></td>
       <td width="12.5%"><div class="data">sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda</div></td>
       <td width="12.5%"><div class="data">sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda</div></td>
       <td width="12.5%"><div class="data">sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda</div></td>
       <td width="12.5%"><div class="data">sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda</div></td>
       <td width="12.5%"><div class="data">sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda</div></td>
       <td width="12.5%"><div class="data">sdafsfsdfsdafasdfsdaafsdfsdfsdfsdafsdfsdafsda</div></td>
    </tr>
    </table>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles