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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
bjornl
  • 1,757
  • 3
  • 17
  • 29
  • 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 '10 at 08:28

4 Answers4

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
});
jerjer
  • 8,694
  • 30
  • 36
  • 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 '10 at 09:50
6
td { text-align: left; }

Tested in IE8 & FF3.6.8

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

wilson
  • 411
  • 2
  • 16
  • 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 tag for it to work, as setting the text-align property on a parent element will not allow it to override it. – OzzyTheGiant Nov 13 '15 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;
}
tony gil
  • 9,424
  • 6
  • 76
  • 100
Kyle
  • 65,599
  • 28
  • 144
  • 152
0

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

body [align] { text-align: center; }
mattsven
  • 22,305
  • 11
  • 68
  • 104