CODEWITHSUNDEEP
csshtml-tablealignmentcell
user1039769
user1039769

Reputation: 225

text-align on a table in a cell (<table> inside a <td>)

Here's something I never thought I'd say: I have a problem in Firefox and Chrome, but it's working fine in IE!

It's very simple, but I don't understand why it doesn't work:

I have a table inside a cell, and I have style="text-align:right" on the cell, but the table is staying left in Firefox and Chrome (in IE it's obediently going to the right...). If I put align=right in the cell tag then it works, but I don't want to do that.

Code is basically:

<table width="1000" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td style="text-align:right">

      <table border="1">
        <tr><td>Hello</td><td>Hello 2</td></tr>
      </table>

    </td>

    <td>Hello 2</td>
  </tr>
</table>

I don't want the nested table to be width=100% or anything like that...

Could anyone please explain to me why it doesn't work, and how to fix it, and maybe why it works in IE but not Firefox or Chrome?

Upvotes: 14

Views: 21943

Answers (4)

alonso.torres
alonso.torres

Reputation: 1229

I would like to add that the CSS way to align tables relative to its container is with the margin property.

You must add margin: 0 auto; if you'd like to align it to the center, or margin-left: auto; if you'd like to align it to the right.

As @maxedison says, text-align will work only with inline and inline-block elements, so the other solution is change your inner table to take some of those display values.

You also need to remember that text-align works from 'container-to-content', this means it is normally applied to a container to affect its content (applied to a p to affect its inline content such as the text within), and margin: 0 auto works from 'content-to-container', meaning that it's normally applied to a block element and affects its position related to its container (applied to a div to center it to its parent).

Upvotes: 6

maxedison
maxedison

Reputation: 17553

My guess is that Chrome and FF are actually the ones rendering it correctly. text-align probably isn't supposed to affect table elements. However, applying float:right to the table will do what you want.

Upvotes: 9

Chboing
Chboing

Reputation: 23

when you don't want the div to be floating, you may try this : http://jsfiddle.net/NvEZ8/

<div style="text-align:right;">
   <table  style="display:inline-block">
       <tbody>
       <tr>
           <td></td>
           <td>one</td>
           <td>two</td>
       </tr>
       </tbody>
    </table>
</div>

It looks like text-align (with a DOCTYPE html) only affects inline-block in Chrome and not inline only element. Replacing inline-block by inline here and it doesn't work anymore on my Chrome

Upvotes: 0

Zerium
Zerium

Reputation: 17333

If you want to fix it (not with full functionality), you can write this:

table {
  display: inline-block;
}

This makes your table able to be centered with text-align: center;, if applied to the parent element(s).

Upvotes: 1

Related Questions