tags:

views:

81

answers:

3

Hello all,

as gathered from http://stackoverflow.com/questions/2546857/why-aligncenter-not-overriding-on-text-alignright 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?

A: 
<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;
}
Kyle Sevenoaks
A: 
td { text-align: left; }

Tested in IE8 & FF3.6.8

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

wilson
+1  A: 

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
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