Чистая таблица ul LI скроллинга CSS с фиксированным заголовком

Я пытаюсь реализовать чистую таблицу прокрутки CSS UL-LI с фиксированным заголовком.

мои требования:

• использование таблицы CSS (таблица, таблица-строка, таблица-ячейка, таблица-заголовок-группа...)
• все ячейки должны быть элементами списка (LI)
• заголовок должен быть исправлен, когда содержимое таблицы прокручивается
• когда столбец таблицы изменяет ширину, соответствующая ширина заголовка должна быть изменена

В настоящее время у меня есть HTML-код:

<ul class="testTable">
    <div class="testHeader">
        <li class="testRow">
            <span>ID</span>
            <span>Name</span>
            <span>Description</span>
            <span>Other details 1</span>
            <span>Other details 2</span>
        </li>
    </div>
    <div class="testBody">
        <li class="testRow">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </li>
        <li class="testRow">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </li>
    </div>
</ul>

...и CSS...

.testTable {
  display: table;
  margin: 0px;
  padding: 0px;
}

.testRow {
  display: table-row;
}

.testRow > 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;
}

скрипка здесь: http://jsfiddle.net/ozrentk/QUqyu/1/

но! момент, когда я пытаюсь исправить положение заголовка, используя position: absolute или fixed таблица разваливается. Я попробовал несколько приемов, но безрезультатно. Кроме того, нет ни одного примера, как это сделать с помощью чистой таблицы CSS.

это, но не совсем то, что я требовать.

есть ли гуру CSS, который может мне помочь?

редактировать

теперь, почему, черт возьми, я хочу, чтобы отобразить этот список в виде таблицы?

в моей динамике ASP.NET MVC driven site у меня есть несколько мест, где я возвращаю неупорядоченные списки в браузер. Затем браузер возьмет эту разметку и покажет ее читателю. Но сам формат отображения может зависеть от контекста, например, от предпочтений, связанных с отображением, или сам формат устройства. CSS используется для форматирования дисплея, как и должно быть. Наконец, если есть какой-то display-light-n-magic-effect, для этого следует использовать jQuery и/или плагин, и, надеюсь,только для этого.

видите ли, я хочу, чтобы мой сервер оставался агностиком формата отображения. То есть я не хочу, чтобы мой сервер заботился о том, как конкретный клиент хочет, чтобы его дисплей выглядел. Я не хочу, чтобы if-blocks возвращали неупорядоченные элементы списка в одном случае и таблица-ячейки в другой. Конечно, у меня могут быть две точки возврата, одна из которых возвращает формат ul/li/span, а другая-table/tr/td, но это будет нарушением принципа DRY.

другое дело, что я использую действительно хороший плагин jQuery, который отображает табличные данные и может быть подан с элементами списка, но не разметкой таблицы. И я решил придерживаться плагина. потому что мне это нравится, это здорово и поддерживает как мой сайт должен работать.

Я надеюсь, что этого рода вещи. Видите ли, использование одной парадигмы может контрастировать с другой. Оказывается, я должен отдать общую-табличную-семантику данных, чтобы иметь сухой код.

П. С. чем больше я думаю об этой ситуации, тем больше она выглядит как прагматическая, а не семантическая проблема.