12

As gathered from Why align="center" not overriding on {text-align:right;} this article, CSS should take prescience over old-style layout attributes. I am working on a project where I have to inject content in a cell that has the format:

<td align="center">...</td>

I do not want my content to be centered, trying to use text-align="left" does not override the td-tag, as suggested in the article. What can I do to override the TD align attibute?

1
  • I realize there's no single CSS attribute to override the td align's; but how can I counter the effect of the align attribute using CSS?
    – bjornl
    Aug 16, 2010 at 8:28

4 Answers 4

14

If you are allowed to change the content of the td, you can then wrap the td values with another tag with text-align:left;

Resulting Tag would be:

<td align="center">
  <div class="left">content here</div>
</td>

Here is the new CSS:

td div.left { text-align:left; }

If you cannot modify the cell value, another work around is to modify the align attribute using javascript, In jquery:

$(document).ready(function(){
   $('td [align=center]').attr('align','left');
   // $('td [align=center]').attr('align','left').css('text-align','left'); //or still not working
});
1
  • Thanks, I'm gonna go for the semi-nasty js hack, since TD align seems to have side effects besides aligning just text. It also affects other elemtns (similar to having a fixed width div wrap around a div with margin: 0 auto; set.)
    – bjornl
    Aug 16, 2010 at 9:50
6
td { text-align: left; }

Tested in IE8 & FF3.6.8

Demo: http://jsfiddle.net/s8qhJ/

1
  • 2
    This answer is better than the one that was marked as "best answer" for those who are working with table layouts in HTML email design. You have to specifically target the <td> tag for it to work, as setting the text-align property on a parent element will not allow it to override it. Nov 13, 2015 at 21:38
3
<td align="center">...</td>

CSS:

td
{
text-align: left;
}

Or add a class to it:

<td align="center" class="mytd">...</td>

CSS:

td.mytd
{
text-align: left;
}
0

For anyone specifically looking to override all elements that specify [align], this'll do:

body [align] { text-align: center; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.