Ways to decrease the spacing between lines in a table row

I am trying to decrease the line height between table rows, but the code I used didn't work. Can you please take a look at the image? Specifically, I want to reduce the space between "Mon-Sat 09:00 AM - 7:00 PM" and "We closed Sunday & Holidays". You can refer to the photo below:

The code I used is as follows, but it did not have any effect:

.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 advise on how to achieve this. The default height of the table is currently too high.

Answer №1

To remove the top and bottom margin of the p tag applied by the browser's CSS, you can add the following condition to adjust the margins as needed:

.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

Using CSS, you have the power to customize HTML tables effortlessly. Take a look at some tips below:

/*To add borders to your table*/
table, td, th {
  border: 1px solid black;
}


/*To merge borders with adjacent cells*/
table {
  border-collapse: collapse;
  width: 100%;
}

/*Adjusting height of th, td, tr elements to 0px for equal heights
 Experiment with this property or try using padding for desired effect*/
th, td, tr {
  height: 0px;
}

Explore more on table size customization here!

Answer №3

Avoid using a table for layout purposes as it limits flexibility. There are plenty of alternatives you can explore, and one example is provided below. Consider using a definition list for this scenario as well.

.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 Sundays & Holidays</div>
</div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Would it be possible for me to adjust the CSS to center the sections?

I'm facing an issue with the layout of my website at . At the bottom, there is a navigation menu and three boxes with images. However, they are currently left-aligned instead of centered. Can anyone suggest CSS code that I can use to center them? Her ...

I seem to be encountering an issue with the image tag while working with HTML code

I have been studying through freecodecamp.org and this is my first tribute project. Everything has been going well, but I am encountering an issue with the image tag. I need to submit my project online, so I have been trying to input image links from Googl ...

Implement a vertical scrollbar when the page exceeds a specific height

I've been combing through Google for a solution with no luck. I'm dealing with absolute content positioning and I'm looking to implement a scrollbar only when the browser window reaches a certain size. This website is fullscreen, so I don&ap ...

How can I retrieve text within a p tag using xpath and xpath axes?

<div class="details"> <p><b>Compatibility:</b> All versions</p> <p><b>Category:</b> Entertainment</p> <p><b>Updated:</b> Apr 2, 2014</p> <p><b>Version ...

The process of executing a PHP file from JavaScript using XMLHttpRequest is experiencing issues on a XAMPP local server

I'm attempting to execute a PHP file using JavaScript. I have my XAMPP server set up and all files saved in the htdocs folder. The PHP file is also stored in the htdocs folder and works correctly when accessed via http://localhost/php_test.php in Chro ...

What is the best method for integrating opensea-js using a script tag in a vanilla HTML/JS environment?

Is there a way to incorporate opensea-js into an html/js project that does not rely on node.js? The source code for opensea-js is only available on github and npm at https://github.com/ProjectOpenSea/opensea-js I came across this link: However, when I tr ...

A div element springs forth into a new window and seamlessly transitions back to its original position with fresh content

Most of us are familiar with Gmail chat, where you can pop out the chat window into a new window with its content, and then pop it back in to its original position. However, I encountered an issue while working on replicating this functionality. While I w ...

Unable to apply CSS styles to a form input using Ajax

Alright, so I've got this Ajax form that successfully fetches the data and displays it in #register_msg. However, I'm also trying to apply some styles to the input forms. Here's my Ajax code, along with the form. But for some reason, the st ...

Need help addressing a sliding page issue in my Upwork clone script using JavaScript

For those familiar with Upwork's UI, you may have noticed a small feature I implemented. When a user clicks on a freelance job offer, another page opens from the left side using transform: translate(120%) to transform: translate(0). The issue arises ...

HTML control for adjusting the pan and tilt of a device

I'm looking to develop an interactive input where users can drag a dot within a box and see the 2D coordinates of that dot displayed. The goal is to use this feature to control pan and tilt values. A similar functionality from another application is s ...

I'm experiencing some compatibility issues with my script - it seems to be functioning correctly on desktops but not on mobile

Below is a script I've implemented on an html page to toggle the visibility of divs based on user interaction. <script> $(document).ready(function(){ $("#solLink").click(function(){ $(".segSlide").hide(), $(".eduSlide").hide ...

I am experiencing an issue where the text is not appearing in my Bootstrap

As a newcomer to Bootstrap and CSS, I'm aware that my question might reflect my lack of experience in these areas. Here is my query: Scenario: I am utilizing Bootstrap along with the [Grayscale theme] to create a basic tool that will assist my stude ...

Shadowy figure in block form

result photo and required modifications The image on the left shows the result I obtained in a browser, while the one on the right displays the desired outcome in Figma. I am struggling with creating a semicircle with a shadow under the coin and implemen ...

Tips for delivering a variable to a React Native Stylesheet

Is there a way to pass a variable to the "shadowColor" property in my stylesheet from an array declared in the code above? I keep encountering a "Can't find name" error. Attempting to use a template literal has not resolved the issue. Any assistance w ...

Developing Action To Execute Node.js within an HTML File

Just starting off with Node.js So I've set up a server using node.js and have the following files: Server.js Client.js Index.html The server is all good to go. But within the HTML file, I want to include a link or action to execute client.js Norm ...

A pair of buttons and text with varying alignment

Here is the code from my popup.htlm file: HTML <body> <select style="width: 100%;" multiple id="HLSlist"> </select> <span style="display:inline"> <button type="button" id="Deletebut">Delete</button> ...

jQuery - Generating numerous instances

Currently, I am utilizing a jquery plugin for file uploads found at the following link: While the plugin works smoothly for a single upload box, I have attempted to set up multiple upload boxes by switching the ID to a class without success. Here is the ...

What is the correct way to include variables {{var}} within a {{#each}} loop?

I'm curious if there's a way to include double-stashed {{var}} embeds in my HTML code. Here is an example: I have the .hbs code below: {{#each tables.books.data}} <tr> <td>...</td> <td>...</td> </tr> {{/eac ...

Struggling with integrating a mixin in your Polymer project?

I'm experiencing difficulties trying to implement a mixin in Polymer. I have created --test-theme, but it seems that the style is not being applied inside the element. Any suggestions on where I might be making a mistake? story-card.html <dom-mod ...

What is the best way to transform Adobe XD designs into HTML and CSS with Vue.js?

I am looking to create a single page application with vue.js and came across this helpful reference at . A colleague has created a prototype using Adobe XD, and now my task is to transform it into HTML/CSS while making it functional and connecting it to an ...