CODEWITHSUNDEEP
htmlcssvertical-alignmentcss-tables
Luigi Tiburzi
Luigi Tiburzi

Reputation: 4325

Align table columns HTML

I finally was able to align the columns in the tables of a page of my website. Though I found the solution I don't understand it. This is a fiddle I prepared. If you delete 

display: block

from the CSS the columns are centered perfectly.

The fact is that I don't understand what that instruction is causing problems, doesn't it means that elements are displayed as block elements? Shouldn't it cause the elements (the raw in particular) to fill an entire line?

Upvotes: 2

Views: 9009

Answers (3)

Dmiller89
Dmiller89

Reputation: 116

I'm a little confused by tables myself but I'll do my best to explain.

The reason that display: block; destroys the alignment of your columns is because you are overriding the default display: table-row; which is used in tandem with the <td> value of display: table-cell: to create the structure of the table.

When creating a table it is better to dictate the total width of the table and then declare the portion each column gets with the width attribute in your HTML.

So,

HTML:

<td width='50%'>

CSS:

.books table {
  width:100%;  /* or whatever your desired width is */
}
.books tr{
  padding-bottom: 20px;
}

.books td{
    text-align: center;
    padding-bottom: 5px;
    font-size: 12pt;
    position: relative;
}

Instead of,

HTML:

<td>

CSS:

.books tr{
  padding-bottom: 20px;
}

.books td{
    width: 30%;
    text-align: center;
    padding-bottom: 5px;
    font-size: 12pt;
    position: relative;
}

Upvotes: 1

timmartins
timmartins

Reputation: 49

the problem is that table has not a full width of the page or whatever element is wrapping the table. Its just wide enough to display all the content therefore you have to set table to 100% width to see the expected result.

I have added an extra border to see the table:

http://cssdeck.com/labs/ays6idqs

table { width: 100%; border: 1px solid red; }

Upvotes: 1

stackErr
stackErr

Reputation: 4170

Your tables width is being automatically set to fit its contents (not the full width of the page), so when you add display:block; it fills this specific width.

If you specify the width of the table to be the width of the div(which is set to width of the page), you will see the expected result:

table{
  width: 100%;
}
.books tr{
  display: block;
  padding-bottom: 20px;
}

Upvotes: 3

Related Questions