tags:

views:

253

answers:

2

Hi,

In the below HTML fragment, how can I make the width of a column that contains 'LAST' occupy the remainder of the row, and widths of columns that contain 'COLUMN ONE' and 'COLUMN TWO' be just wide enough to contain their content, and not larger.

Thank you

<html><head>
<style type="text/css">

table {
  border-collapse: collapse;
}

table td {
  border: 1px solid black;
}

</style>
</head>

<body>
<table>
  <tr>
    <td>
     <table width="100%">
       <tr>
         <td>
           <span>
             COLUMN
           </span>
           <span>
             ONE
           </span>
         </td>
         <td>
            COLUMN TWO
         </td>
         <td>
           LAST
         </td>
       </tr>
     </table>
    </td>
  </tr>
  <tr>
    <td>
      ANOTHER ROW
    </td>
  </tr>

</table>
</body> </html>
A: 

There are probably better solutions using CSS, but what I have done is set the width of the final column to something like 95-100%

<td> ONE </td>
<td> TWO </td>
<td width=100%> LAST </td>
MikeW
That doesn't work, since it shrinks the first two columns so they end up wrapping their content.
ikaushan
A: 

You will need to tell the first two columns not to wrap and give the last column a width of 99%:

<table width="100%">
       <tr>
         <td nowrap>
           <span>
             COLUMN
           </span>
           <span>
             ONE
           </span>
         </td>
         <td nowrap>
            COLUMN TWO
         </td>
         <td width="99%">
           LAST
         </td>
       </tr>
     </table>
jeroen