Reducing HTML Table Row Height

Question

I have table with few rows. I want 1st and 3rd row height to be set to 1 px and the 2nd row to normal height. But my code is not working.

HTML CODE goes below

<table border="0">
   <tr style="height:2px;" >
    <td width="10"><hr></td>

  </tr>
<tr style="height:20px;" >
    <td width="10">Hello</td>

  </tr>
  <tr style="height:20px;" >
    <td width="10"><hr></td>

  </tr>
</table>

Could anyone please tell me how to do it ?

Note: I dont want borders to be used because i Want for certain rows i may or may not need the horizontal line inside the rows.

Answer 1

Add style="padding:0px; margin:0px;" to your hr and change the height of your third tr to 2px

You will have :

<table border="0">
   <tr style="height:2px;" >
    <td width="10px"><hr style="padding:0px; margin:0px;"></td>
  </tr>
<tr style="height:20px;" >
    <td width="10px">Hello</td>
  </tr>
  <tr style="height:2px;" >
    <td width="10px"><hr style="padding:0px; margin:0px;"></td>
  </tr>
</table>