CODEWITHSUNDEEP
htmlcss
logan
logan

Reputation: 8346

Reducing HTML Table Row Height

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.

enter image description here 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.

Upvotes: 17

Views: 117680

Answers (1)

Marc-Andr&#233; Bilodeau-Lamontagne
Marc-Andr&#233; Bilodeau-Lamontagne

Reputation: 896

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>

Upvotes: 22

Related Questions