title: Padding between two jquery datepicker tables
body: <p><a href="https://i.stack.imgur.com/Xnbh1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xnbh1.png" alt="Datepicker Example"></a></p>
  
  <p>I need spacing between the two tables inside the jquery date picker which as common header.I tried with various solutions like giving padding to the parent div,but I"m unable to resolve it.Can anyone help?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;style&gt;
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default,
    .ui-button,
    html .ui-button.ui-state-disabled:hover,
    html .ui-button.ui-state-disabled:active {
      background: 0 !important;
      border: 0 !important;
      color: #9c9c9c !important;
      font-weight: bold;
      text-align: center !important;
      white-space: no-wrap;
      font-size: 10px;
    }
    
    table {
      border-collapse: collapse !important;
      margin: 0;
    }
    
    .ui-datepicker-multi .ui-datepicker-group table {
      width: 100% !important;
    }
    
    &lt;!-- .ui-datepicker-unselectable.ui-state-disabled {
      border: 0 !important;
    }
    
    --&gt;.ui-datepicker-unselectable.ui-state-default {
      display: none;
    }
    
    .ui-state-range {
      background-color: #FBD2D3 !important;
      color: #fff !important;
    }
    
    #ui-datepicker-div tr td:hover *,
    #ui-datepicker-div tr td&gt;.ui-state-default.ui-state-hover,
    .ui-datepicker-current-day {
      background-color: #F4777C !important;
      color: #fff !important;
      text-align: center !important;
    }
    
    thead::after {
      content: "";
      display: block;
      height: 1.5em;
      width: 100%;
      background: white;
    }
    
    .ui-datepicker-today {
      background-color: none !important;
    }
    
    .ui-datepicker td span,
    .ui-datepicker td a {
      text-align: center !important;
    }
    
    tbody {
      margin-left: 10px !important;
      margin-right: 10px !important;
    }
    
    td {
      border: 1px solid #F6F6F6 !important;
    }
    
    #ui-datepicker-div {
      display: none;
      left: 8px;
      position: absolute;
      top: 31px;
      width: 50% !important;
      z-index: 1;
    }
    
    .ui-datepicker-header.ui-widget-header {
      background-color: #F6F6F6 !important;
      border: 0 !important;
      font-weight: bold;
      color: #9c9c9c !important;
    }
    
    .ui-datepicker th {
      background-color: #F6F6F6 !important;
      border: 0 !important;
      font-weight: normal;
    }
    
    .lowTicketValue {
      color: #326EA6;
      white-space: no-wrap;
      font-size: 10px;
    }
    
    .lowTicketValue:active {
      color: #fff !important;
      white-space: no-wrap;
    }
    
    .ui-datepicker .ui-state-range {
      background-color: #F4777C !important;
    }
    
    .ui-datepicker-calendar .highlight {
      background-color: #FBD2D3 !important;
    }
    
    .ui-state-range {
      background-color: #F4777C !important;
    }
    
    .highTicketValue {
      color: #F4777C !important;
    }
    
    #ui-datepicker-div tr td:nth-child(2n+1)&gt;span {
      color: #F4777C !important;
    }
    
    #ui-datepicker-div tr td:nth-child(2n+1):active&gt;span,
    #ui-datepicker-div tr td:nth-child(2n+1):hover&gt;span {
      color: #fff !important;
    }
  &lt;/style&gt;
  &lt;input type="text" id="flexibledates" /&gt;
  &lt;input type="text" id="flightdeparture" /&gt;
  &lt;script&gt;
    $(function() {
      $('#flexibledates').datepicker({
        changeMonth: false,
        numberOfMonths: 2,
        dateFormat: 'D, d MM',
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        beforeShow: function(input, inst) {
          insertMessageStartDate();
        },
        onSelect: function(selectedDate) {
          var selectedDate = $("#flexibledates").datepicker("getDate");
          if (selectedDate != null) {
            $('#flightdeparture').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
          }
        }
      });
      $('#flightdeparture').datepicker({
        changeMonth: false,
        numberOfMonths: 2,
        dateFormat: 'D, d MM',
  
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        beforeShow: function(input, inst) {
          insertMessageEndDate();
        },
        onSelect: function(selectedDate) {
          $('#flexibledates').datepicker('option', 'maxDate', $(this).datepicker('getDate')); // Reset maximum date     
        }
  
  
  
      });
  
  
      function insertMessageStartDate(message) {
        clearTimeout(insertMessageStartDate.timer);
  
        if ($('#ui-datepicker-div .ui-datepicker-calendar .ui-state-default').is(':visible')) {
          $('.ui-state-default').after('&lt;span class="lowTicketValue"&gt;' + 45555 + '&lt;/span&gt;');
  
  
  
        } else
          insertMessageStartDate.timer = setTimeout(insertMessageStartDate, 10);
      }
  
      function insertMessageEndDate(message) {
        clearTimeout(insertMessageEndDate.timer);
        // $("#flexibledates").datepicker("getDate").css({"background-color": "#F4777C !important", "color": "#fff !important"});
        if ($('#ui-datepicker-div .ui-datepicker-calendar .ui-state-default').is(':visible')) {
  
          $('.ui-state-default').after('&lt;span class="lowTicketValue"&gt;' + 45555 + '&lt;/span&gt;');
          $("#ui-datepicker-div td").on({
            mouseenter: function() {
              $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
            },
            mouseleave: function() {
              $("#ui-datepicker-div td").removeClass("highlight");
            }
          });
  
  
        } else
          insertMessageEndDate.timer = setTimeout(insertMessageEndDate, 10);
      }
    });
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>