Fix a table

Useful CSS

The <table> element has been mistreated severely, and therefore has an undeserved bad reputation. However, it has many great uses.

Freezing the first column

The first column of this table has been fixed to stay in place while the rest of the table has been equipped with scrolling ability by setting the overflow-y property, which, although itself not an official standard (yet), is supported by most CSS2 compliant browsers. No Javascript is involved.

The table is composed of three tables: one is a single column inside the left cell of a two-cell table, while the cell on the right contains the last table, with the same number of rows as the first table, but a multitude of columns. The idea is of course more useful when applied to larger tables than this example.

The code

Note that the only declared width is the viewable area of the scrolling table. All other dimensions adept to the content in the tables. A dummy <div> is required on line 24 to push the scrollbar below the last row.

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td valign="top">

      <table cellpadding="1" cellspacing="1" border="1">
      <tr>
        <th>Name</th>
      </tr>
      <tr>
        <td>Hamlet</td>
      </tr>
  ...
      </table>

    </td>
    <td valign="top">

      <div style="width:175px; overflow:auto; overflow-y:hidden;">

        <table cellpadding="1" cellspacing="1" border="1">
          <tr>
            <th>Role</th>
  ...
        </table><div>&nbsp;</div>

      </div>

    </td>
  </tr>
</table>