René Nyffenegger's collection of things on the web
René Nyffenegger on Oracle - Most wanted - Feedback

Using expression in CSS

The following example demonstrates how expression can be used in CSS to lock a column of table on the left side:
   <title>Some Title</title>

  table {
    border-collapse : collapse;
    table-layout    : fixed;

  td, th {
    background-color: #aaaaaa;
    border-right    : 1px solid #ffffff;
    color           : #ffffff;
    width           : 100px;
    text-align      : center;

  td.locked_left, th.locked_left {
    background-color: #88ff88;
    font-weight     : bold;
    left            : expression(document.getElementById('table_container').scrollLeft);
    border-left     : 1px solid #ffffff;
    position        : relative;
    z-index         : 1

  #table_container {
     width          : 300px;
     overflow       : scroll;


  <div id='table_container'>

         <th class='locked_left'>Number</th>
         <th                    >English</th>
         <th                    >French </th>
         <th                    >German </th>

          <td class='locked_left'>1</td>
          <td                    >one</td>
          <td                    >un</td>
          <td                    >eins</td>
          <td class='locked_left'>2</td>
          <td                    >two</td>
          <td                    >deux</td>
          <td                    >zwei</td>
          <td class='locked_left'>3</td>
          <td                    >three</td>
          <td                    >trois</td>
          <td                    >drei</td>
          <td class='locked_left'>4</td>
          <td                    >four</td>
          <td                    >quattre</td>
          <td                    >vier</td>