The spacing within the table's <tr> elements does not get altered

I am struggling to add a small space in the table <tr> but my attempts have not been successful. How can I resolve this issue? Please refer to the image below for clarification:

.panel-booking .panel-body {
    padding: 0px;
    height: 100px;
}
.panel-booking  {
top:-60px; position:relative;
}
.tab-tb2 .nav-tabs li a {border-left: 1px solid #bfc1c3;height: 25px;}
#line-booking hr{margin-top: -45px; margin-left: 1px; width: 408px;color: #f00;
background-color: #ececec;
height: 1px;}

.booking-left-btn tr {line-height:30px;}
.booking-left-btn table, th, td {
}
.booking-left-btn th, td {
    padding: 5px;
    text-align: left;
}

.booking-left-btn .btn {
    display: inline-block;
    padding: 12px 7px;
    margin-bottom: 21px;
    font-size: 14px;
    margin-left: -15px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    background-color: none;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid #bdc4cb;
    border-radius: 10px;
}

.booking-left-btn .room-detials {
    text-align: center;
    margin-left: -2px; color: #53585f;
}
.booking-left-btn .room-number {
    text-align: center;
    font-size: 15px;
    color: #444444;
}
.booking-left-btn  .panel-default {
  border-color: #ddd;
    height: 67px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -ie-border-radius: 12px;
    -opera-border-radius: 12px;
    -chrome-border-radius: 12px;
    border-radius: 11px;
    overflow: hidden;
    width: 329px;
    margin-left: -5px;


}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
                          <div class="panel-booking">


<div class="booking-left-btn" style="margin-left:25px;">

  <table style="width:100%">


    <tr>
      <td><button type="button" class="btn btn-default">    <div class="room-detials">Room</div>
          <div class="room-number">1</div></button></td>
      <td>    <div class="panel panel-default">
      <div class="panel-heading">Mahesh H</div>
      <div class="panel-body">Panel Content</div>
    </div></td>
    </tr>
    <tr>
      <td >     <button type="button" class="btn btn-default">    <div class="room-detials">Room</div>
          <div class="room-number">1</div></button></td>
      <td> <div class="panel panel-default">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body">Panel Content</div>
    </div></td>
    </tr>
    <tr>
      <td >     <button type="button" class="btn btn-default">    <div class="room-detials">Room</div>
          <div class="room-number">1</div></button></td>
      <td> <div class="panel panel-default">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body">Panel Content</div>
    </div></td>
    </tr>
    <tr>
      <td >     <button type="button" class="btn btn-default">    <div class="room-detials">Room</div>
          <div class="room-number">1</div></button></td>
      <td> <div class="panel panel-default">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body">Panel Content</div>
    </div></td>
    </tr>
    <tr>
      <td >     <button type="button" class="btn btn-default">    <div class="room-detials">Room</div>
          <div class="room-number">1</div></button></td>
      <td> <div class="panel panel-default">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body">Panel Content</div>
    </div></td>
    </tr>
    <tr>
      <td >     <button type="button" class="btn btn-default">    <div class="room-detials">Room</div>
          <div class="room-number">1</div></button></td>
      <td> <div class="panel panel-default">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body">Panel Content</div>
    </div></td>
    </tr>
  </table>


</div>


                            </div>

htmlcsshtml-table

Answer №1

Have you considered utilizing &nbsp; It's a handy little trick that can be quite useful.

Answer №2

Remember to utilize &nbsp; when needed 

<div class="panel-content">&nbsp;Content inside panel</div>

If working within a table, make sure to include cellspacing="20" in your table tag

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

My live website is plagued by an annoying horizontal scroll bar that doesn't appear in the local host version

I am struggling to remove the unwanted horizontal scroll bar on my live website, although it is not visible on my local host... <-- this is my website, built using Vite + ReactJs. I attempted to use overflow: hidden; and max-width: 100% on the body t ...

cssreactjswebweb-deploymentvite

Chrome Extension to Emphasize Every Word

As a novice, I am embarking on the journey of creating my own chrome extension. The idea is to design a popup.html file that showcases a "highlight" button. The functionality would involve clicking this button to highlight all words on the page. Here&apos ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Steps for modifying the documents on an osCmax website

I had a developer set up my website in osCmax a while ago, and now I want to update the design of some pages using HTML and CSS on my own. While I am comfortable with HTML and CSS, I have very limited knowledge of PHP. This is my first attempt at working o ...

phphtmloscommerce

Head styles for tinyMCE

When viewing the tinyMCE example on the official website using Firefox, you may notice the editor blinking. This issue seems to only occur in Firefox, possibly due to external CSS files for the editor. I am considering adding all CSS rules directly into th ...

javascriptcssiframetinymce

What is the best way to maintain parameters in PHP form code?

I am facing an issue with a script that needs to run with a specific parameter (for example, details.php?studentid=10325). The script contains a form with the following code snippet to send form data back to the current script. However, for some reason, t ...

phphtmlpostparameters

Interactive JQuery plugin for scrolling through thumbnails with customizable buttons

I am attempting to create a jQuery thumbnail scroller with buttons that respond to mousedown and mouseup events. I have successfully implemented the scrolling functionality, but I am facing issues when trying to refactor it into a reusable function. Below ...

javascriptjqueryhtmlcss

Flashing bug in the outFunction of jquery hover()

My friends and I are working on a website for a class project, but we're running into a strange issue with the outFunction part of our hover function. Whenever the mouse hovers over an element, a grey square fades in using .fadeIn(), but then immediat ...

javascriptjqueryhtml

Tips for shortening extra text in a non-wrapping HTML table cell and adding "..." at the end

My HTML template includes text imported from a database field into a <td> tag. The length of the text can range from 3 to 200 characters, and the <td> spans 100% of the screen width. If the text surpasses the width of the screen, I want it to b ...

javascriptcsshtml

Having difficulty changing placeholder text style in Scss

I'm a newcomer to SCSS and I'm attempting to customize the color of my placeholder text from light gray to dark gray. Below is the HTML code snippet: <div class="form-group"> <textarea class="thread-textarea" ng-maxlength="255" ma ...

csshtmlsass

Tips for dynamically adjusting the size of a div container according to the user's

I have been working on a unique landing page design featuring a menu made up of custom hexagons. I aim to make these hexagons dynamically adjust to fill the entire screen based on the user's resolution, eliminating the need for scrolling. For a previ ...

javascriptjqueryhtmlcss

Best practices for working with HTML elements using JavaScript

What is the best approach for manipulating HTML controls? One way is to create HTML elements dynamically: var select = document.getElementById("MyList"); var options = ["1", "2", "3", "4", "5"]; for (var i = 0; i < options.length; i++) { var opt = ...

javascripthtml

Alerts for drop down menu validation with multiple buttons

My goal is to design a multi-step form that collects user information. This form consists of 5 stages: Step 1: User details (Name, email, phone, age, gender) Step 2: Yes or No question Step 3: Yes or No question Step 4: Yes or No question Step 5: Yes o ...

javascriptjqueryhtml

When I click on a link to redirect it, I am confronted with a bizarre rectangle that

When attempting to create redirects using images, I encountered a small issue. Take a look at this screenshot: This is the item in question: <p><div><a title="Home" href="/home"><img src="/icons/home.svg" ...

htmlcss

Interacting with various cookies created from user-provided input (specifically from textboxes) simultaneously

I'm facing a challenging problem and I'm in need of some assistance. The task at hand is to create three text boxes for users to input values for cookies named: name, city, and hobby. Then, using a single button with an onclick event, a function ...

javascripthtmlcookies

What is the method for selecting the "save as" option while downloading a file?

Imagine a scenario where you click on a link like this: <a href="1.txt">Download</a> After clicking the link, a save as window will appear. Is it feasible to utilize JavaScript in order to simulate button clicks within that window? Alternativ ...

javascripthtmlgoogle-chrome

Centering navigation using HTML5

I've been struggling a bit trying to build a website, particularly with centering my <nav> tag. Despite reading numerous suggestions like using CSS properties such as margin: 0 auto; or text-align: center, nothing seems to be working for me. Si ...

javascriptcsshtmltwitter-bootstrap

What is the best way to utilize Rselenium's findElement() function in order to target an xpath based on its text content

Despite researching similar questions on stack overflow, I have not been able to make my code work. Here is the initial code I am working with: library(RSelenium) library(rvest) remote_driver <- RSelenium::remoteDriver( remoteServerAddr = "local ...

htmlrseleniumxpathrselenium

Struggling to close modal popup after submitting form

click here for imageCurrently, I am working with the bootstrap modal plugin to create an inquiry form. The issue I am facing is that even though I am using the "ng-submit" directive to save the form details, when I click submit, the form submits successful ...

javahtmlangularjs

Having trouble updating the icon on my website using FontAwsome

Just a heads up - I'm not familiar with HTML/CSS/JS. This template is pre-made, and I'm simply making some adjustments to it. Hello, I'm currently working on my portfolio website and I want to display my projects based on the programming la ...

javascripthtmlcssfont-awesome

An unusual html element

During a recent exploration of a website's code using the inspect tool, I stumbled upon a tag that was completely unfamiliar to me. <gblockquote></gblockquote> I've come across a blockquote before, but never a gblockquote. Interest ...

javascripthtml