Ich kann CSS-Tabellen nicht vertikal ausrichten

Question

Ich bevorzuge HTML-Tabellen - Viel einfacher & schneller zu tun .. Aber ich versuche, konform zu sein und CSS-Tabellen zu tun.

ich ein neues Problem habe ..

Ich versuche, eine HTML-Seite in CSS zu tun - mit eingereichten Daten .. wo es 3-4 Bits von Daten und eine Anzahl von Zeilen.

Daten 4 von Zeile 1 sollten vertikal mit Daten 4 von Zeile 2 ausgerichtet sein. - Einfach genug.

Allerdings, wenn ich Grenze: 1 px; & zeigt einen Rahmen, ich kann sehen, dass die Spalten NICHT ausgerichtet sind.

Zeile 2, Daten 1 ist vertikal mit Daten 1 der vorherigen Zeile ausgerichtet - aber es geht auch halbwegs unter Daten 2, & Zeile 2 - Daten 2, ist direkt unter Daten 2 & 3 der vorherigen Zeile.

Fehle ich ein Stück CSS?

CSS-Code: -

 .table  { display: table; border: 1px solid black; } 
     .row  { display: table-row; border: 1px solid black; } 
     .cell  { display: table-cell; border: 1px solid black; } 

HTML-Code: -

 <div id="table" style=" width=100%; margin: auto;"> 
     <div class="row"> 
      <span class="cell" style="float:left; padding: 10px;"><a href='/view/2'> Kitten Inn</a></span> 
      <span class="cell" style="float:left; padding: 10px;"> Wellington</span> 
     </div> 
     <div class="row"> 
      <span class="cell" style="float:left; padding: 10px;"><a href='/view/1'> Kiwi Birdlife Park</a></span> 
      <span class="cell" style="float:left; padding: 10px;"> Otago</span> 
     </div> 
     </div> 

URL: - http://animals.kwister.com/directory/

Answer 1

float: left stört Ihre Tabellenformatierung. Wenn Sie es löschen, funktioniert alles.

https://jsfiddle.net/cL5LLh15/2/

.table { 
 
    display: table; 
 
    border: 1px solid black; 
 
} 
 
.row { 
 
    display: table-row; 
 
    border: 1px solid black; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    border: 1px solid black; 
 
}

<div id="table" style=" width=100%; margin: auto;"> 
 
    <div class="row"> 
 
    <span class="cell" style="padding: 10px;"><a href='/view/2'> Kitten Inn</a></span> 
 
    <span class="cell" style="padding: 10px;"> Wellington</span> 
 
    </div> 
 
    <div class="row"> 
 
    <span class="cell" style="padding: 10px;"><a href='/view/1'> Kiwi Birdlife Park</a></span> 
 
    <span class="cell" style="padding: 10px;"> Otago</span> 
 
    </div> 
 
</div>