Creating tables with percentages AND pixels

[CoryNickerson]

Hello,

This is just a quick guide of how to set some cells in a row to use hard pixel points for the widths, while others use percentages.

I had some trouble with getting my tables for my forumbit and threadbit templates to have fixed pixel widths for the posts and view columns and then use percentages for the remaining column. Took a while for me to figure out how to do this.

The problem started when I tried using the width command in a <TD> to use percentages in some cells, and fixed widths in others. Whenever I have created a design before I was able to just insert the pixel or percentage on the cells and it would work fine. Example below.

PHP Code:

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="50">
            Cell1</td>
        <td width="70%">
            Cell2</td>
        <td width="50">
            Cell3</td>
        <td width="50">
            Cell4</td>
        <td width="30%">
            Cell5</td>
    </tr>
</table> 


In the above example cell's 1, 3 and 4 would be a fixed 50 pixels regardless of screen size. Cells 2 and 5 will make up the remaining space by the percentages used for each one.

For some reason coding it like that wouldn't work. It would read the percentages but it wouldn't read the pixel amounts if theres another cell in the same row that uses a percent.

I tried everything to fix this too...
width="50"
width="50px"
style="width:50;"
style="width:50px;"
etc etc....

None of that worked. Then I figured this new method using a <div> inside of the the cell. Example below.

PHP Code:

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td >
            <div style="width:50px;">Cell1</div></td>
        <td width="70%">
            Cell2</td>
        <td>
            <div style="width:50px;">Cell3</div></td>
        <td>
            <div style="width:50px;">Cell4</div></td>
        <td width="30%">
            Cell5</td>
    </tr>
</table> 


The <div> with a fixed pixel width using the CSS style command will make the cell containing the <div> have a fixed width. The cell itself isn't programed to be that fixed width with the <td>, but, the content's of the cell will stretch the size it "should be" (according to the <td>) to the size of the <div>.

Just a handy trick to get your forums template to look uber sexy. Was very useful on my site. I couldn't get it to work so I was having to use "&nbsp;" and spacer images. Check it out in action here. http://ezpk.net

Any questions feel free to ask. Hope you found this useful. Thanks!!