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

Question

Hi all,

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?

Thanks.

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;

}

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

Answer 1

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

<td width="200"></td>