how to reduce line height of a table row-CodePudding

I wanna reduce line height between table rows. I used following code, But it didn't work for me.. Please look at my picture. I wanna reduce line height between "Mon - Sat 09:00AM - 7:00PM" and "We closed Sunday & Holidays". see the photo enter image description here

i used following code,But i didn't do anything

.tb tr {
  height: 0px;
}

<table  style="margin:0 15.0% 0 0; float: right;">
  <tr>
    <td>
      <p style="font-weight: bold;  float: right;">Business Hours:</p>
    </td>
    <td><span style="font-weight: bold; color: red; ">Mon - Sat 09:00AM - 7:00PM</span></td>
  </tr>
  <tr>
    <td></td>
    <td><span style="font-weight: bold;color: red; ">We closed Sunday & Holidays</span> </td>
  </tr>
</table>

Please tell me how to do it.. default table height is very high.

CodePudding user response：

The p tag has margin at top and bottom from the browser css. Please just add the below condition and adjust the margins to your desired height!

.tb tr {
  height: 0px;
}

p.bottom-no-space {
  margin: 0px;
}

<table  style="margin:0 15.0% 0 0; float: right;">
  <tr>
    <td>
      <p style="font-weight: bold;  float: right;" >Business Hours:</p>
    </td>
    <td><span style="font-weight: bold; color: red; ">Mon - Sat 09:00AM - 7:00PM</span></td>
  </tr>
  <tr>
    <td></td>
    <td><span style="font-weight: bold;color: red; ">We closed Sunday & Holidays</span> </td>
  </tr>
</table>

CodePudding user response：

You can easily manipulate HTML tables with css using the ff.

/*if you want your table to have borders*/
table, td, th {
  border: 1px solid black;
}


/*If you want your borders to be merged to other borders*/
table {
  border-collapse: collapse;
  width: 100%;
}

/*Finally the height, this will give your th, td and tr an equal height of 0px
 just try to play with this to get your desired height, you can also use padding*/
th, td, tr {
  height: 0px;
}

https://www.w3schools.com/css/css_table_size.asp

CodePudding user response：

Don't use a table. You can lay this out with much more flexibility with out. There are many ways to do this. Just one example is below. A definition list would also be a good candidate here.

.businessHours * {font-size:16px;}
.businessHours h1 {margin: 0; padding-right:1em;}
.businessHours {display:flex; align-itmes:flex-start;}
.businessHours > div {color:red; font-weight:bold;}

<section >
<h1>Business Hours</h1>
<div>
  <div>Mon - Sun 0:900AM - 7:00PM</div>
  <div>We are closed Sundsays & Holidays</div>
</div>
</section>