私はCSSテーブルを縦に並べることができません

Question

私はHTMLテーブルを好んでいます - より簡単に&をやりやすくします。しかし、私はCSSテーブルを準拠させようとしています。

私はCSSでHTMLページをやろうとしている。..

を新たに問題を持っている - 3-4データのビットと行数がある提出データ...と。

行1のデータ4は、行2のデータ4と垂直に整列する必要があります。

ただし、border：1ピクセルを使用すると、 &は境界線を表示するので、列が整列していないことがわかります。

行2の場合、データ1は前の行のデータ1と垂直に整列されますが、データ2の下半分になります。&行2 - データ2は前の行のデータ2 & 3のすぐ下にあります。

CSSが欠けていますか？

CSSコード： -

 .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は、あなたのテーブルの書式を妨げます。それを削除するとすべてが機能します。

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>