CSS 테이블을 수직으로 정렬 할 수 없습니다.

Question

HTML 테이블이 더 편합니다. 훨씬 편리합니다. & 빨리 처리 할 수 ​​있습니다. 그러나 CSS 테이블을 준수하고 노력하고 있습니다.

나는 새로운 문제가 생겼어요

..

나는 CSS에서 HTML 페이지를 할 노력하고있어 - 3-4 데이터의 비트 행의 숫자가 상정 데이터 ..와.

행 1의 데이터 4는 행 2의 데이터 4와 수직으로 정렬해야합니다.

그러나 테두리를 사용할 때 : 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 코드 : -

 <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는 테이블 형식 방해합니다. 삭제하면 모든 것이 작동합니다. 당신은`추가 플로트 이유를 모르겠어요 - left`을 : 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>