我無法垂直對齊CSS表格

我更喜歡HTML表格 - 更容易做到& ..但是，我試圖遵守CSS表格。我無法垂直對齊CSS表格

我有一個新的問題..

我想在CSS做一個HTML頁面 - 用表格數據..那裏有數據的3-4位和行數。

第1行的數據4應該與第2行的數據4垂直對齊。 - 很簡單。

但是，當我使用邊框：1 px; &顯示一個邊框，我可以看到這些列沒有對齊。

行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>

網址： - http://animals.kwister.com/directory/

來源

2016-07-30 G Stewpot

您使用的表單元格，然後摧毀以'浮動：left' - 我不知道爲什麼你接着說：浮動：left'但它的不必要的，可能是你的問題的全部原因。 –

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>

來源

2016-07-30 09:47:40

我無法垂直對齊CSS表格

回答

相關問題