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

nofel · November 7, 2010, 7:42pm

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


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

Mittineague · November 7, 2010, 8:41pm

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.

Stevie_D · November 7, 2010, 8:46pm

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).

gary_turner · November 7, 2010, 9:08pm

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

<!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

Mittineague · November 7, 2010, 10:16pm

: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).

nofel · November 8, 2010, 5:44am

gary,yes i been