SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    table width not according to 'actual' width but of data

    hey folks,
    i been working on width of table. with just unknowingly the amount of data a table cell can have. i gave it with (table width) but if the data is larger in a cell. the table cell width is pushed to accommodate the data. hence loosing the meaning of giving it width and having data wrapped in a specific calculated width of table. here is example i created of a table with static text
    Code HTML4Strict:
    <html>
    	<head>
    		<title></title>
    		<style type="text/css">
    		div.heads{width:800px; clear:right; margin:0 atuo;}
    		div.scroll{width:800px;height:100px; clear:right; margin:0 atuo;overflow:auto;}
    		</style>
    	</head>
     
    	<body>
    		<div class="heads">
    		<table width="800" border="1">
    			<tr>
    				<th>First Name</th>
    				<th>Last Number</th>
    				<th>Address</th>
    			</tr>
    		</table>
    		</div>
    		<div class="scroll">
    		<table width="790" border="1">
    			<tr>
    				<td align="center">Matt</td>
    				<td align="center">Hanery</td>
    				<td align="center">Langley</td>
    			</tr>
    			<tr>
    				<td align="center">Martha</td>
    				<td align="center">Kent</td>
    				<td align="center">Smallville</td>
    			</tr>
    			<tr>
    				<td align="center">Lex</td>
    				<td align="center">Luthur</td>
    				<td align="center">Smallville</td>
    			</tr>
    						<tr>
    				<td align="center">Clark</td>
    				<td align="center">Kent</td>
    				<td align="center">Smallville, Earth and Kryptonite, Space in univerise (this is some huge text)</td>
    			</tr>
    			<tr>
    				<td align="center">Nofel</td>
    				<td align="center">Khan</td>
    				<td align="center">Islamabad</td>
    			</tr>
    			<tr>
    				<td align="center">Chole</td>
    				<td align="center">Lane</td>
    				<td align="center">california</td>
    			</tr>			<tr>
    				<td align="center">Jor</td>
    				<td align="center">El</td>
    				<td align="center">Fotress</td>
    			</tr>
    			<tr>
    				<td align="center">Emaar</td>
    				<td align="center">Khan</td>
    				<td align="center">Langley</td>
    			</tr>
    			<tr>
    				<td align="center">Nofel</td>
    				<td align="center">Khan</td>
    				<td align="center">Langley</td>
    			</tr>			<tr>
    				<td align="center">Ammar</td>
    				<td align="center">Khan</td>
    				<td align="center">Langley</td>
    			</tr>
    			<tr>
    				<td align="center">Emaar</td>
    				<td align="center">Khan</td>
    				<td align="center">Langley</td>
    			</tr>
    			<tr>
    				<td align="center">Nofel</td>
    				<td align="center">Khan</td>
    				<td align="center">Langley</td>
    			</tr>			<tr>
    				<td align="center">Ammar</td>
    				<td align="center">Khan</td>
    				<td align="center">Langley</td>
    			</tr>
    			<tr>
    				<td align="center">Emaar</td>
    				<td align="center">Khan</td>
    				<td align="center">Langley</td>
    			</tr>
    			<tr>
    				<td align="center">Nofel</td>
    				<td align="center">Khan</td>
    				<td align="center">Langley</td>
    			</tr>
    		</table>
    		</div>
    All those who wander aren't lost.

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,191
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    I think the problem is that you are using two tables, one for the "heads" and one for the "scroll".

    If you put everything in one table the heads will line up with the cells below them.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    In that case, you've set a width for the table, and that is all that you have set. The resulting table is behaving exactly as you have specified - it is the width required. Nowhere does it say that columns should have equal width.

    Browsers will adjust the size of the cells to what they consider a "best fit", which usually means that the width of each column is in proportion to the length of the longest cell content within them. If you want to override that and set specific widths for each of the columns, you need to do that. You can set widths either in pixels or % on cells in the first row of each table (actually it doesn't matter if it's the first row or not, but that's the easiest way).

  4. #4
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As the others have said, your tables are working as designed. It is unfortunate that browsers other than the Gecko powered do not render the scrolling tbody correctly. See code below—view in Firefox for reference, then in IE,Opera and Safari/Chrome.

    Paul had a quiz on this problem you might want to take a look at: http://www.sitepoint.com/forums/showthread.php?t=615364

    Code:
    <!DOCTYPE HTML>
     
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    
      <title>Test document</title>
    
            <style type="text/css">
    table {
      margin: 0 auto;
      }
    
    tbody {
      height: 250px;
      overflow: auto;
      }
    
    th, td {
      width: 33%;
      }
    
            </style>
        </head>
       
        <body>
            <table width="800" border="1">
              <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Number</th>
                    <th>Address</th>
                </tr>
              </thead>
    
              <tfoot>
                <tr>
                    <th>First Name</th>
                    <th>Last Number</th>
                    <th>Address</th>
                </tr>
              </tfoot>
              
              <tbody>
                <tr>
                    <td align="center">Matt</td>
                    <td align="center">Hanery</td>
                    <td align="center">Langley</td>
                </tr>
                <tr>
                    <td align="center">Martha</td>
                    <td align="center">Kent</td>
                    <td align="center">Smallville</td>
                </tr>
                <tr>
                    <td align="center">Lex</td>
                    <td align="center">Luthur</td>
                    <td align="center">Smallville</td>
                </tr>
                            <tr>
                    <td align="center">Clark</td>
                    <td align="center">Kent</td>
                    <td align="center">Smallville, Earth and Kryptonite, Space in univerise (this is some huge text)</td>
                </tr>
                <tr>
                    <td align="center">Nofel</td>
                    <td align="center">Khan</td>
                    <td align="center">Islamabad</td>
                </tr>
                <tr>
                    <td align="center">Chole</td>
                    <td align="center">Lane</td>
                    <td align="center">california</td>
                </tr>         <tr>
                    <td align="center">Jor</td>
                    <td align="center">El</td>
                    <td align="center">Fotress</td>
                </tr>
                <tr>
                    <td align="center">Emaar</td>
                    <td align="center">Khan</td>
                    <td align="center">Langley</td>
                </tr>
                <tr>
                    <td align="center">Nofel</td>
                    <td align="center">Khan</td>
                    <td align="center">Langley</td>
                </tr>         <tr>
                    <td align="center">Ammar</td>
                    <td align="center">Khan</td>
                    <td align="center">Langley</td>
                </tr>
                <tr>
                    <td align="center">Emaar</td>
                    <td align="center">Khan</td>
                    <td align="center">Langley</td>
                </tr>
                <tr>
                    <td align="center">Nofel</td>
                    <td align="center">Khan</td>
                    <td align="center">Langley</td>
                </tr>         <tr>
                    <td align="center">Ammar</td>
                    <td align="center">Khan</td>
                    <td align="center">Langley</td>
                </tr>
                <tr>
                    <td align="center">Emaar</td>
                    <td align="center">Khan</td>
                    <td align="center">Langley</td>
                </tr>
                <tr>
                    <td align="center">Nofel</td>
                    <td align="center">Khan</td>
                    <td align="center">Langley</td>
                </tr>
              </tbody>
            </table>
    </body></html>
    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,191
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    :d'oh: I was fooling with it a bit and then I realized what you were trying to achieve.

    Most tables simply repeat the head rows every so often. But I like the idea of the fixed heads with a scrolling body much better.

    Thanks Gary for posting that, it feels good to learn something new (well, new to me anyway).

  6. #6
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    gary,yes i been
    All those who wander aren't lost.


Bookmarks

Posting Permissions

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