title: Pure CSS scrolling UL LI table with fixed header
body: <p>I'm trying to implement a pure CSS scrolling UL-LI table with fixed header.</p>
  
  <p>My requirements:</p>
  
  <ul>
  <li>using table CSS (table, table-row, table-cell, table-header-group...)</li>
  <li>all cells have to be list items (LI)</li>
  <li>header has to be fixed when table content is scrolling</li>
  <li>when table column changes width, appropriate header width should be changed</li>
  </ul>
  
  <p>Currently I have HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul class="testTable"&gt;
      &lt;div class="testHeader"&gt;
          &lt;li class="testRow"&gt;
              &lt;span&gt;ID&lt;/span&gt;
              &lt;span&gt;Name&lt;/span&gt;
              &lt;span&gt;Description&lt;/span&gt;
              &lt;span&gt;Other details 1&lt;/span&gt;
              &lt;span&gt;Other details 2&lt;/span&gt;
          &lt;/li&gt;
      &lt;/div&gt;
      &lt;div class="testBody"&gt;
          &lt;li class="testRow"&gt;
              &lt;span&gt;1&lt;/span&gt;
              &lt;span&gt;2&lt;/span&gt;
              &lt;span&gt;3&lt;/span&gt;
              &lt;span&gt;4&lt;/span&gt;
              &lt;span&gt;5&lt;/span&gt;
          &lt;/li&gt;
          &lt;li class="testRow"&gt;
              &lt;span&gt;1&lt;/span&gt;
              &lt;span&gt;2&lt;/span&gt;
              &lt;span&gt;3&lt;/span&gt;
              &lt;span&gt;4&lt;/span&gt;
              &lt;span&gt;5&lt;/span&gt;
          &lt;/li&gt;
      &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>...and CSS...</p>
  
  <pre class="lang-css prettyprint-override"><code>.testTable {
    display: table;
    margin: 0px;
    padding: 0px;
  }
  
  .testRow {
    display: table-row;
  }
  
  .testRow &gt; span {
    list-style:none;
    display: table-cell;
    border: 1px solid #000;
    padding: 2px 6px;
  }
  
  .testHeader {
    display: table-header-group;
    /*position: absolute;*/
  }
  
  .testHeader span {
    background-color: #ccc;
  }
  
  .testBody {
    display: table-row-group;
  }
  </code></pre>
  
  <p>Fiddle is here:
  <a href="http://jsfiddle.net/ozrentk/QUqyu/1/" rel="nofollow noreferrer">http://jsfiddle.net/ozrentk/QUqyu/1/</a></p>
  
  <p><strong>BUT!</strong> The moment I try to fix position of the header using <code>position: absolute</code> or <code>fixed</code>, the table falls apart. I tried several techniques, but to no avail. Also, there is zero to none examples how to do this using pure table CSS.</p>
  
  <p><a href="https://stackoverflow.com/questions/14862693/scrolling-ul-with-fixed-header">This was close</a>, but not exactly what I require.</p>
  
  <p>Is there a CSS guru that can help me?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p><em>Now, why the hell did I want to display this list as a table?</em></p>
  
  <p>In my dynamic ASP.NET MVC driven site I have a number of places where I return unordered lists to the browser. Browser will then take this markup and display it to the reader. But the display format itself can actually depend on context, like users display-related preferences or the device format itself. CSS is used for the display formatting, as it should be. At last, if there is some display-light-n-magic-effect to be used, jQuery and/or a plugin should be used for that, and hopefully <em>only</em> for that.</p>
  
  <p>You see, I want my server to remain display-format agnostic. That is, I don't want my server to care about how the particular client want his display to look like. I don't want if-blocks that return unordered-list-items in one case and table-cells in the other. Of course I could have two return points, one which returns ul/li/span format and the other which returns table/tr/td, but that would be violating DRY principle.</p>
  
  <p>Another thing is that I'm using a really nice jQuery plugin that displays tabular data and can be fed with list-items, but not table markup. And I decided to stick with the plugin. because I like it, it's great and supports the way my site should work.</p>
  
  <p>I hope this sorts things out. You see, using one paradigm can be in contrast with the other. It turns out I have to give away general-tabular-data-semantics to have a DRY code. </p>
  
  <p><strong>P.S.</strong> The more I think about this situation, the more it looks like a pragmatic, not a semantic problem.</p>