CSS fluid and fixed columns

Question

I have table, for example:

<table>
 <tr>
  <td>
  </td>
  <td>
  </td>
  <td class="fixed">
  </td>
 </tr>
</table>

for example my table width is 800px.

all first two columns must be fluid, but last: fixed...

how could i do this?

also what would be if my first two columns are very small? how to attach fixed to right? (also height is fluid)

Answer 1

• The <table> gets table-layout: fixed ; this will allow the third column to remain its fixed width

• The table also gets a max-width: 800px and width: 100% ; it will resize

• We place three <col> elements inside the table to represent the columns; the third column gets our class with width: 250px

Complete Example

 table { table-layout: fixed; max-width: 800px; width: 100%; } .fixed { width: 250px; } td { padding: 10px; border: solid 1px #000; } 

 <table> <col> <col> <col class="fixed"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>