G Stewpot G Stewpot - 20 days ago 6
CSS Question

I cannot vertically align CSS tables

I prefer HTML tables - Much easier & quicker to do.. But, I'm trying to be compliant and do CSS tables.

I've got a new problem..

I'm trying to do a html page in CSS - with tabled data.. where there are 3-4 bits of data and a number of rows.

Data 4 of row 1 should align vertically with data 4 of row 2. - easy enough.

However, when I use border:1 px; & displays a border, I can see that the columns are NOT aligned.

Row 2, data 1 is vertically aligned with data 1 of the prior row - but it ALSO goes half way below data 2, & row 2 - data 2, is directly below data 2 & 3 of the previous row.

Am I missing a piece of CSS ?

CSS code :-

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


HTML CODE :-

<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

float: left interferes with your table formatting. When you delete it everything works.

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>