How to get width I set tables and TD's etc. to be the size I set them?

[Beauford]

Hi All,

I really need some help with tables, each time I do a site I find myself wasting hours and hours on end, and this time is no different. I am into hour 10 trying to get this to work.

I just want the widths I set in my table and TD's etc. to be the size I set them. My table is 850px wide, with 12 TD's or TH's being various sizes from 40px to 150px. This also has to take into account the 1px borders and possibly the padding, but that one confuses me.

If someone can show me a way to do this successfully that would be great as I am just having no luck.

I should mention too that I do not want the TD's shrinking or expanding based on content. I want them to stay the size that is laid out for them. If it needs to wrap to the next line, I can live with that.

I have posted my code and CSS below, but I would prefer fresh input of how to do this, not a mickey mouse fix of what I have done that doesn't work, as I am sure it is right out to lunch after all the changes I have done.

Thanks for the help

Table Code

 
        echo "
        <table class='home' width: 850px' cellspacing='0'>
        <tr align='top'>
        <th>Invoice</th>
        <th>PO</th>
        <th align='center' >Date</th>
        <th align='center'>Pending</th>
        <th align='center'>Completed</th>
        <th>Name</b></th>
        <th>Address</b></th>
        <th align='center'>Status</th>
        <th align='center'>Tech</th>
        <th align='center'>Edit</th>
        <th align='center'>View</th>
        <th align='center'>Print</th>
        </tr>
        <tr style='border-left: solid 1px #FFFFFF; border-right: solid 1px #FFFFFF'><td colspan='12'></td></tr>";
 
        while($r=$db->fetch_row($q)) {
 
            if ($alternate == "1") {
                $color = "#ffffff";
                $alternate = "2";
                }
                else {
                $color = "#c0c0c0";
                $alternate = "1";
            }    
 
            $rn = explode("-", $r['record_number']);
 
            echo "<tr valign='top' style='background-color: {$color}'> 
                  <td><div style='width: 40px'>{$rn[1]}</div></td>
                  <td><div style='width: 60px'>{$r['po']}</div></td>
                  <td><div style='width: 68px'>{$r['dr']}</div></td>
                  <td><div style='width: 68px'>{$r['ds']}</div></td>
                  <td><div style='width: 68px'>{$r['dc']}</div></td>
                  <td><div style='width: 86px'>{$r['firstname']} {$r['lastname']}</div></td>
                  <td><div style='width: 150px'>{$r['st_number']} {$r['address']}, {$r['city']}</div></td>
                  <td><div style='width: 68px' align='center'>{$r['statuscode']}</div></td>
                  <td><div style='width: 30px' align='center'>{$r['tech']}</div></td>
                  <td><div style='width: 30px' align='center' class='link'>Edit</div></td>
                  <td><div style='width: 30px' align='center' class='link'>View</div></td>";
                  ?> 
                  <td><div style='width: 30px' align='center'>
                  <a class='link' href="javascript: void(0)" 
                  onclick="window.open('print-pdf.php?inv=<? echo $r['record_number']; ?>', 
                  'print', 
                  'toolbar=no,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes');
                  return false;">Print</a>
                  </div></td>
                  <?
                  echo "                  
                  </td>                  
                  </tr>";
        }
 
        echo "</table>";    

CSS Code

 
table.home {
    font-size: 7pt;
    color: #000000; 
    border-width: 1px 1px 1px 1px;
    border-spacing: 1px;
    border-style: solid solid solid solid;
    border-color: gray gray gray gray;
    border-collapse: collapse;
    background-color: white;
}
table.home th {
    color: #000000; 
    font-size: 7pt;
    font-weight: 700;
    background-color: #e5e5e5; 
    height: 20px;
    white-space:nowrap;
    border-width: 1px 1px 1px 1px;
    padding: 2px 2px 2px 2px;
    border-style: inset inset inset inset;
    border-color: gray gray gray gray;
    -moz-border-radius: 0px 0px 0px 0px;
}
table.home td {
    text-align: left;
    vertical-align: middle;
    color: #000000; 
    font-size: 7pt;
    font-weight: 400;
    height: 20px;
    border-width: 1px 1px 1px 1px;
    padding: 2px 2px 2px 2px;
    border-style: inset inset inset inset;
    border-color: gray gray gray gray;
    -moz-border-radius: 0px 0px 0px 0px;
}
 
 

[Beauford]

Anyone? This is quite time sensitive and any help is appreciated.

[Dormilich]

not sure how far the browser support is, but you should look into the <col> & <colgroup> elements.

[Bryan Cheung]

At first glance: the width should be on the <td> and not on the div.

Its easier for us to debug if we can see the code in action. Is there a online example?

[JKing]

You haven't properly declared a width for your table.

 <table class='home' width: 850px' cellspacing='0'>
 

Should be one of the following:

<table class='home' width='850' cellspacing='0' cellpadding='0'>
 
OR
 
<table class='home' style='width:850px;' cellspacing='0' cellpadding='0'>
 

[Beauford]

This is why I hate posting code. Typo. Of course the real code is correct.

[Beauford]

Tried that, and this is why I put it on the DIV. I have probably tried 3 dozen ways to do this, none of them the way I want it. I am thinking now that this is just not possible with the way tables and CSS currently work.

[Beauford]

I have never used these in a table and not sure what they do or how they would help in this circumstance, but I will have a quick look and see if they might add anything.

[Beauford]

Thanks for all the replies, but I am still where I was. As I mentioned, I don't think this can work, and since I have yet to get a definative answer on any group, it certainly looks more and more this way. I hope someone comes up with a better tables one day, but probably not in my life time.

[Bryan Cheung]

Again, a online example? Im not using PHP anymore so I dont have a test environment. But if you have a online example there will be no typo's right? and we see the true code in work.

[JKing]

You typed both of those code blocks out? Why wouldn't you just copy and paste the code?

This also has to take into account the 1px borders and possibly the padding, but that one confuses me.

Take a look at the box model

If you add up all the widths you have declared you will get 728px. Factor in a 1px border for each element with border collapse on for another 13px. The padding of 2px on each side of the element for another 48px. Add them up 728 + 13 + 48 = 789px.

There is an extra 61px the browser is deciding what to do with.

[Beauford]

As long as I have posted to groups, I am at a loss to understand why examples are such a big thing, if you know and understand tables, then you should know of what I am up against. What I am asking is not so much a problem with my code, but a bad design in tables and how to work wih it. In any event, all my coding is done on a private home server.

[Beauford]

In a nutshell this is what i want. An 850px table with 12 TD's of various sizes. The sizes need to be static. Wrap if to long but stay the same size if content is shorter or non existent. Look at an excel spread sheet. This can do what I want, how can I get the same effect in tables. Forget any code I have posted as it isn't right anyway. How would you do it if you were creating the same table structure.

Tanks again for all the posts.

[JKing]

There is nothing wrong with the design of tables in html.

Here is an example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    table {border-collapse:collapse;table-layout:fixed;border:1px solid black;width:850px;}
    td {overflow:hidden;border:1px solid black;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
    <td width="80">Cell 1</td>
    <td width="50">Cell 2</td>
    <td width="50">Cell 3</td>
    <td width="50">Cell 4</td>
    <td width="50">Cell 5</td>
    <td width="70">Cell 6</td>
    <td width="80">Cell 7</td>
    <td width="70">Cell 8</td>
    <td width="150">Cell 9</td>
    <td width="100">Cell 10</td>
    <td width="40">Cell 11 tooooooooooooooooooooooooooo lonnnnggggggggggggggggggggggggggggggg</td>
    <td width="60">Cell 12</td>
</tr>
</table>
</body>
</html>
 

Since you are pulling from a database, I would do a check to see if the content is non existent and insert a non-breaking space if it is indeed non existent.

[Beauford]

"There is nothing wrong with the design of tables in html."

I would and will debate this until the end of time. They are a terrible design for todays uses and even in the past were not much better.

However, a debate for another time.

In regards to you post, this, and many variations of this, is what I have been doing and does not work for what I need, and why I make my comment above.

If data is to wide or not wide enough tables screw-up.

So the question again, when I have a table that is 100px wide and 5 TD's that are 10 40 25 15 10 wide for each one. How do I get them to stay that way regardless of what is in them. It will only ever be text, so wrapping is not an issue if to long. But what about other cells.

Unfortunately I can not show an example, but I am 99% there, but the size of the TD still fluxuate.

Thanks again.

[Dormilich]

maybe the overflow property is of help …

[JKing]

Did you even try the example I provided?
Did you notice the CSS?
Particularly the table-layout:fixed;?
Did you look at Cell 11?

I gave you everything you needed to satisfy your requirements. I even tested the example in the following browsers: IE6, IE7, IE8, Firefox and Chrome.

Again there is nothing wrong with tables.
It is not debatable. Millions of sites use tables without an issue.

[NetDynamic]

People still use tables!?

[JKing]

For tabular data, yes.

[Bryan Cheung]

Why the surprise NetDynamic. I'd be surprise if people would not use it. Many websites needs to show data in tabular form.

[NetDynamic]

I'm just playing although for layout I avoid them like the plague

[Bryan Cheung]

Ofcourse you should avoid it for layout purpose because it was not designed for that. Its true purpose is displaying data like a excel sheet(colums, rows, cells etc).