我无法垂直对齐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表格

回答

相关问题