Html – How to make last cell of a row in a table occupy all remaining width

csshtml

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

table {
  border-collapse: collapse;
}
table td {
  border: 1px solid black;
}
<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>

Best Answer

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 style="white-space: nowrap;">
           <span>
             COLUMN
           </span>
           <span>
             ONE
           </span>
         </td>
         <td style="white-space: nowrap;">
            COLUMN TWO
         </td>
         <td width="99%">
           LAST
         </td>
       </tr>
     </table>

Edit: You should put that all styles / presentation in (external...) css.

Using classes for the columns (you could use css3 selectors like nth-child() instead if you only target modern browsers):

html:

<tr>
  <td class="col1">
  // etc

css:

.col1, .col2 {
  white-space: nowrap;
}
.col3 {
  width: 99%;
}
Related Topic