HTML Table, first and last column fixed width and columns between dynamic, but equal width

csshtml

Is it possible to have a table with width 100% (so the table fits the screen size), where the first and the last column have a fixed width, and the columns between take the rest, both 50%.

Like:

+--------------------+--------------------------------------+--------------------------------------+------------+
| width:300px;       | with dynamic, equals next column     | width dynamic, equals prevous column | width:50px;|
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+

Best Answer

Try this:

As you can see the two centre column remain equal sized, due to the table-layout:fixed, even when the content is of different length. Try adding more and less content to the two centre columns.

JSFiddle: http://jsfiddle.net/RtXSh/

CSS

table {
    width:100%;
    border-collapse:collapse;
    table-layout:fixed; 
}

td {
    border: 1px solid #333;
}

HTML

  <table>
    <tr>
      <td style="width:300px;">
        test
      </td>
      <td>
        test test tes test test
      </td>
      <td>
        test
      </td>
      <td style="width:50px;">
        test
      </td>
    </tr>
  </table>
Related Topic