Problem in Setting table's height to one pixel

Hi I have an html page which is using a css. When I try to add table with height of 1 pixel in this page as following..

<table width="100%">
<tr style="height:1px;">
<td style="background-color:red; width:2.5%;">
</td>

<td style="background-color:orange;">
</td>

<td style="background-color:red; width:2.5%;">
</td>

</tr>
</table>

It make a table with height 18 pixel. It may be because css that is attached with this html has defined criteria for table. Can anyone please suggest me how to isolate that single table so that it should 开发者_运维知识库not influenced by that css... Answers are highly appreciated. Thanks in advance.

You can't set a height on table rows in CSS. Try applying the style to the table element.

If you have empty td's it'll render oddly, add a style="font-size: 1px;" to the td then put an   in the td. Then it will respect a height: 1px; on the table element

If the CSS is conflicting with the linked CSS, just use the !important selector to overwrite it - that's sort of why it's there in the first place. I'd advise just changing the linked CSS file instead, though, if you're able.

http://jsfiddle.net/RWuAb/

<table width="100%" style="height:1px !important;">
<tr style="height:1px !important;">
<td style="background-color:red; width:2.5%;">
</td>
<td style="background-color:blue; width:2.5%;">
</td>
<td style="background-color:orange;">
</td>
<td style="background-color:red; width:2.5%;">
</td>
</tr>
</table>

If the CSS is acting on all <table>, you can't cancel it. Find out what is being applied to your element, then override it with CSS scoped to a new class.