我无法垂直对齐 CSS 个表格

Question

我更喜欢 HTML 表格 - 做起来更容易和更快。但是，我正在努力做到合规并做 CSS 表格。

我遇到了一个新问题..

我正在尝试在 CSS 中创建一个 html 页面 - 使用表格数据.. 其中有 3-4 位数据和许多行。

第 1 行的数据 4 应与第 2 行的数据 4 垂直对齐。- 很简单。

然而，当我使用 border: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>

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

Answer 1

float: left 会干扰您的 table 格式。当你删除它时一切正常。

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>

我无法垂直对齐 CSS 个表格

I cannot vertically align CSS tables

html

css

css-tables