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:
<html>
<head>
   <title>Some Title</title>
   <style> 
    <!--

  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;
  }
    -->
   </style>
   </head>

<body>

  <div id='table_container'>

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

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

    </table>

  </div>


</body>
</html>