Question

我更喜欢HTML表格 - 更容易和更轻松更快做..但是，我试图遵守并做CSS表。

我有一个新问题..

我试图在CSS中使用html页面 - 使用表格数据..其中有3-4位数据和多行。

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

然而，当我使用border：1 px; ＆安培;显示边框，我可以看到列未对齐。

第2行，数据1与前一行的数据1垂直对齐 - 但它也比数据2低一半，＆amp;第2行 - 数据2，直接位于数据2＆amp;前一行的第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/

Answer 1

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

https://jsfiddle.net/cL5LLh15/2/

＆＃13;

.table {
  display: table;
  border: 1px solid black;
}
.row {
  display: table-row;
  border: 1px solid black;
}
.cell {
  display: table-cell;
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

我无法垂直对齐CSS表格

1 个答案: