Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make a td fixed size (width,height) while rest of td's can expand

Do you know, how to fix the size of a td Width and Height in a table allowing the rest of td on table to expand as needed?

The problem is that when there is data inside of td's it will not shrink more than the data, but if is empty it will shrink all the way, if you expand the window the td will expand.

I would like to keep the size of the td whether you expand or shrink the window and whether the td has data inside or not.

Also I need to keep the rest of td's able to expand as you expand window.

Class tableContainerRow2 is the one I need it to be a fixed size. e.g.

<style>
    .divContainer {
        margin:10px;
        background-color:#C7D8EE;
        border:2px solid #0076BF;
        text-align:left;    
    }

    .tableContainer {
        color:#0076BF;
        margin: -10px 0px -10px 0px;
        border-spacing: 10px;
        empty-cells:show;
        width:90%;
    }

    .tableContainerRow2 {
        background-color:white;
        border:2px solid #0076BF;
    }
</style>

<div class="divContainer">
    <table class="tableContainer" cellspacing="10px">
        <tr>
            <td width="18%" style="white-space:nowrap;" >NHS Number</td>
            <td width="17%">&#160;</td>
            <td width="10%"  style="white-space:nowrap;">Date of Visit</td>
            <td width="10%">&#160;</td>
            <td colspan="3" style="white-space:nowrap;">Care Time Started</td>
            <td width="4%">&#160;</td>
            <td width="5%">&#160;</td>
            <td width="25%" rowspan="2" style="font-weight:bold;vertical-align:middle;white-space:nowrap;">Tick when<br/> care starts</td>
        </tr>
        <tr >
            <td width="18%" class="tableContainerRow2">&#160;0123456789</td>
            <td width="17%">&#160;</td>
            <td width="10%" class="tableContainerRow2">&#160;12/12/09</td>
            <td width="10%">&#160;</td>
            <td width="5%" class="tableContainerRow2">&#160;12</td>
            <td width="1%" >&#160;:</td>
            <td width="5%" class="tableContainerRow2">&#160;10</td>                       
            <td width="4%">&#160;</td>
            <td width="5%">&#160;&#9745;</td>
            <td width="10%" >&#160;</td>
        </tr>
    </table>
</div>
like image 390
Amra Avatar asked Jan 18 '10 09:01

Amra


2 Answers

This will take care of the empty td:

<td style="min-width: 20px;"></td>
like image 147
claw68 Avatar answered Oct 25 '22 04:10

claw68


just set the width of the td/column you want to be fixed and the rest will expand.

<td width="200"></td>
like image 31
spatel Avatar answered Oct 25 '22 03:10

spatel