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?
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
});
td { text-align: left; }
Tested in IE8 & FF3.6.8
Demo: http://jsfiddle.net/s8qhJ/
<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;
}
For anyone specifically looking to override all elements that specify [align], this'll do:
body [align] { text-align: center; }
精彩评论