larghezza diversa delle celle in una tabella fatta con <DIV> e <UL>

[emulman]

premetto che per evitare di usare tabelle utilizzo una tecnica che prevede di usare <UL> per creare righe di tabelle come nel caso seguente:

<div id="tabella">
  <ul class="header"><li class="cell1">cella1</li><li class="cell2">cella2</li><li class="cell3">cella3</li></ul>
  <ul><li class="cell1">cella4</li><li class="cell2">cella5</li><li class="cell3">cella6</li></ul>
  <ul><li class="cell1">cella7</li><li class="cell2">cella8</li><li class="cell3">cella9</li></ul>
</div>

associata ad un foglio di stile

.table ul {
  float: left;
  margin: 0px;
  padding: 0px;
  border: 1px solid #C9C9C9;
  display: block;
}

.table ul li {
  display: inline-block;
  list-style: none;
  padding: 5px 10px;
  vertical-align: top;
  border-right: 2px solid #C9C9C9;
  margin: 0px;
}

.table ul.header {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 11px;
  font-weight: bold;
  background: #FFFF00;
  color: #000000;
  width: 100%;
}

.table ul li.cell1 { width: 15%; padding: 0.5em 0.5em; }
.table ul li.cell2 { width: 30%; padding: 0.5em 0.5em; }
.table ul li.cell3 { width: 20%; padding: 0.5em 0.5em; }

le ultime tre righe stabiliscono la larghezza di ogni "cella". ma sul video le celle con class="header" sembrano più strette delle celle sottostanti nonostante abbiano la stessa classe! come mai? vi invio pure una parte di immagine su un mio sito che sto costruendo: