CSS List-Based Tables

This morning I needed to put together a layout for a demo. It was previously done with HTML Tables (there is nothing wrong with using tables when you've got to use tables), however, I've felt the need to convert it into a CSS-list-ish table instead. A couple of hours of looking around the Internet and I couldn't really find what I needed. So I came up with the following which satisfies my requirements in running seamlessly in the latest browsers. I haven't checked it out in Internet Explorer however, so not too sure how it'd do there. But for my current requirement, it works perfectly. Here's the CSS code for the stylesheet:

/* here is our table */
.table {
  display: table;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  overflow: auto;
  text-align: left;
  border-top: 1px solid #CCC;
  border-right: 1px solid #CCC;
}

.table ul {
  display: table-row;
  list-style: none;
  height: 2em;
  width: 100%;
}

.table ul li {
  display: table-cell;
  height: 2em;
  border-left: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  padding: 0.5em 0.5em;
  width:10%;
}

.table ul.header {
  height: 2.5em;
  background: #EEE;
}

.table ul.header li {
  height: 2.5em;
  text-align: left;
  font-weight: bold;
  font-size: 1em;
  padding-top: 0.7em;
  padding-bottom: 0;
}

A typical example of using the stylesheet above would look as follows:

Product Name
Product Code
Unit Price
Quantity
MacBook Pro
ML-1025a
USD 1500
2
Google Nexus One
GNO-v1.0
USD 499
10

Well that's it. Hope someone finds it useful.