how to reduce line height of a table row - html

Question

I wanna reduce the line height between table rows. I used the following code, But it didn't work for me. Please look at my picture. I wanna reduce the line height between "Mon-Sat 09:00 AM - 7:00 PM" and
"We closed Sunday & Holidays". see the photo
I used following code, But I didn't do anything
.tb tr {
height: 0px;
}
table {
margin: 0 15.0% 0 0;
float: right;
}
p {
font-weight: bold;
float: right;
}
span {
font-weight: bold;
color: red;
}
<table class="tb">
<tr>
<td>
<p>Business Hours:</p>
</td>
<td><span>Mon - Sat 09:00AM - 7:00PM</span></td>
</tr>
<tr>
<td></td>
<td><span>We closed Sunday & Holidays</span> </td>
</tr>
</table>
Please tell me how to do it.. default table height is very high.

Answer 1

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 class="tb" style="margin:0 15.0% 0 0; float: right;">
<tr>
<td>
<p style="font-weight: bold; float: right;" class="bottom-no-space">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>

Answer 2

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

Answer 3

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 class="businessHours">
<h1>Business Hours</h1>
<div>
<div>Mon - Sun 0:900AM - 7:00PM</div>
<div>We are closed Sundsays & Holidays</div>
</div>
</section>