CODEWITHSUNDEEP
htmlcsscss-tables
G Stewpot
G Stewpot

Reputation: 97

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/

Upvotes: 0

Views: 54

Answers (1)

keiv.fly
keiv.fly

Reputation: 4015

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>

Upvotes: 3

Related Questions