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:

https://i.sstatic.net/HXdhq.png

.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

Why do I keep getting an ExpressionChangedAfterItHasBeenChecked error after trying to update a random color in an

Is there a way to assign a random color from an array without causing the error message: "ExpressionChangedAfterItHasBeenChecked"? Even though the color of the chip changes quickly before the message appears, it seems like it's working. How can I reso ...

javascripthtmlarraysangulartypescript

Identify a duplicate class name element using Selenium

<ul class="k9GMp "> <li class="Y8-fY "><span class="-nal3 "><span class="g47SY ">2</span> posts</span> </li> <li class="Y8-fY "><a class="-nal3 " href="/username/followers/" tabindex="0"><span ...

pythonhtmlseleniumclasshref

Trouble with Unveiling the Secondary Accordion

I am having issues adding a second accordion next to the existing one. Even though the code is working fine in the tryit editor v3.6 online, it doesn't seem to display correctly for me. I have made sure that I am using the latest versions of all scrip ...

htmlcssbootstrap-4

Include a back button during the loading of a URL in an Electron application

Within my Electron application, I have implemented elements that, upon clicking, redirect to a URL. However, navigating back to the previous (local) page is not currently achievable. Is there a feasible method to incorporate a layered back button on top o ...

javascripthtmlcssnode.jselectron

No JavaScript needed: Create custom overflow/scroll indicators using CSS only

Is there a way to align the content of a box to the left when the box doesn't overflow? I have a scroll indicator created with CSS only, which works well but has this alignment issue. Any suggestions or improvements on the code are welcome :) html ...

css

What is the best way to integrate Sass into my CSS?

Currently, I am diving into the world of Sass and I am truly impressed by its simplicity. However, I have encountered a hurdle when it comes to compiling and importing my styles. Whenever I look at my style.css file, I notice that it includes not only the ...

csstwitter-bootstrapsasscompass-sass

Extract information from the table using $_POST

I possess a datatable within a form. Inside that table, there is a column designated for setting a price. Upon submitting the form on the same page, the $_POST data fails to populate. Consequently, I am in need of inserting it into the MySQL db post-submit ...

phphtmlmysqldatatable

I have written code in JavaScript, but now I am interested in converting it to jQuery

What is the best way to convert this to jQuery? showDish("balkandish1") function showDish(dishName) { var i; $(".city").css('display', 'none'); $("#" + dishName).css('display', 'block'); } ...

javascriptjqueryhtmlcss

Fixing the Jquery animation glitch triggered by mouseover and mouseout

In my project, I have implemented a small mouseover and mouseout functionality. The challenge I am facing is that I need to keep the mouseout function using animate() instead of css() for specific reasons. The issue arises when I quickly do a mouseover fo ...

javascriptjqueryhtmlcssanimation

Combobox fails to dynamically update

Currently, I am attempting to create a dropdown menu that dynamically updates based on changes made in another dropdown menu. Despite my efforts, I have not been able to find a suitable solution and feel quite lost at this point. In an attempt to troubles ...

phphtmlajaxcombobox

Internet Explorer fails to account for the height of table cells when using overflow-x:auto, leading to hidden content. In contrast, Chrome adjusts for this automatically. What steps can be taken to address

Chrome: https://i.sstatic.net/bzgOT.jpg Internet Explorer: https://i.sstatic.net/qHH1r.jpg The image at the top shows how the content should appear on Chrome, while the one below demonstrates how it is displayed on IE11. The issue seems to be that on In ...

htmlcssinternet-explorer

Misunderstandings between HTML and CSS

Can someone please clarify how the functionality of the active-slide class? Code: <div class="slider"> <div class="slide active-slide">..</div> <div class = "slide slide-feature">..</div> <div class = "slide">..</di ...

javascriptjqueryhtmlcss

To access an RSS feed, use Google Chrome as your browser

I am struggling with my .php script that generates an RSS-Feed on-the-fly. My goal is to attach a .css stylesheet to this script so that browsers lacking a built-in RSS-viewer can properly display the feed. I achieved this using the following code snippet ...

phpcssgoogle-chromerss

Android WebView does not support rendering Persian fonts

I am having an issue with applying a Persian font to my html content, which contains both Persian and English text. The CSS is correctly applied except for the font itself. In the CSS, I have defined the font-face like so: @font-face{ font-family ...

androidhtmlcssfontswebview

What is the proper way to bind CoreUI's CSwitch component?

I am trying to incorporate the CSwitch component into a DevExtreme data grid. While the DxSwitch component functions correctly, I am unable to get the CSwitch to work properly. It seems like I might be using the wrong binding. Could that be the issue? < ...

javascripthtmlvue.jsdata-bindingcore-ui

Using jQuery, selectively reveal and conceal multiple tbody groups by first concealing them, then revealing them based on

My goal is to initially display only the first tbody on page load, followed by showing the remaining tbody sections based on a selection in a dropdown using jQuery. Please see below for a snippet of the code. //custom JS to add $("#choice").change(func ...

javascriptjqueryhtmlcss

Using WebDriver Selenium to choose an element within a table following another element

The webpage features a user details table with a functionality to delete users. To remove a user, I must select the row based on the username and then click the "Delete" button. The structure of the HTML table is as follows: <table id="tblUsersGrid" ce ...

cssseleniumxpathselenium-webdriver

The CSS class is not properly implemented in the React component

I value your time and assistance. I have spent many hours trying to solve this issue but seem unable to reach a resolution. Here is the React component in question: import styles from './style.scss'; class ButtonComponent extends React.Compone ...

javascriptcssreactjswebpackreact-boilerplate

Can anyone assist with troubleshooting the font size issue for a JavaScript tooltip on Joomla 1.5 with CK Forms?

My Joomla 1.5 site has CK Forms installed and is functioning properly, except for one issue: the tooltip on the captcha is not displaying correctly. It appears in a tiny 1px font size. Even though I have tried debugging using Firebug and confirmed that the ...

javascriptcssfirebugjoomla1.5

List formatted in a table

Can a list be inserted into a table using markdown? I attempted to research this but came up empty-handed. An example of a Table: Fruit |Color ---------|---------- Apples |Red Pears |Green and an example of a list: List item 1 List item 2 ...

htmlmarkdown