title: Large white-space between first and second Bootstrap table column
body: <p>How can I remove the large white space between the Name column and the first date column containing 24? </p>
  
  <p>It looks to be caused by the Bootstrap CSS but I'm not sure why.</p>
  
  <p>The issue goes away based on my underlying model when there are more dates available in the calendar but I'm struggling to figure out why.</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-css lang-css prettyprint-override"><code>#container-body {
    padding-bottom: 1rem;
    padding-top: 1rem;
  }
  
  #locala-oc {
    height: 30px;
    padding-right: 1rem;
  }
  
  table.dt-table {
    border-spacing: 0;
  }
  
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: center;
    margin: 0;
  }
  
  nav {
    border-bottom: 1px solid #792273;
  }
  
  .form-text-bottom {
    display: block;
    margin-bottom: 0.5rem;
  }
  
  thead.remove-header-top &gt; tr &gt; th {
    border-top: 0;
    padding-top: 0;
  }
  
  tr.table-striped-odd {
    background-color: rgba(0, 0, 0, 0.05);
  }
  
  .validation-summary-errors ul {
    list-style: none;
  }
  
  .stock-card {
    height: 220px;
  }
  
  .stock-card-header {
    height: 80px;
    vertical-align: middle;
  }
  
  #calendar th,
  #calendar td {
    white-space: nowrap;
  }
  
  #calendar th.name,
  #calendar td.name {
    background: white;
    position: absolute;
    margin-left: -200px;
    width: 200px;
  }
  
  .calendar-wrapper {
    overflow-x: scroll;
    width: 100%;
  }
  
  #calendar {
    table-layout: fixed;
    margin-left: 200px;
  }
  
  #calendar col.day,
  #calendar th.day,
  #calendar td.day {
    width: 40px;
    text-align: center;
  }
  
  #calendar &gt; thead &gt; tr &gt; th.weekend,
  #calendar &gt; tbody &gt; tr &gt; td.weekend {
    background: lightgray;
  }
  
  #calendar &gt; tbody &gt; tr &gt; td.user-rt {
    background-color: #792273;
  }
  
  #calendar &gt; tbody &gt; tr &gt; td.user-al {
    background-color: darkgray;
  }
  
  #calendar &gt; tbody &gt; tr &gt; td.user-rt.user-al {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, red), color-stop(50%, green));
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"&gt;
  &lt;div class="calendar-wrapper"&gt;
    &lt;table id="calendar" class="table table-bordered"&gt;
      &lt;colgroup&gt;
        &lt;col class="name"&gt;
          &lt;col class="day" data-date="20171124"&gt;
            &lt;col class="day weekend" data-date="20171125"&gt;
              &lt;col class="day weekend" data-date="20171126"&gt;
                &lt;col class="day" data-date="20171127"&gt;
                  &lt;col class="day" data-date="20171128"&gt;
                    &lt;col class="day" data-date="20171129"&gt;
                      &lt;col class="day" data-date="20171130"&gt;
      &lt;/colgroup&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th class="name"&gt;&amp;nbsp;&lt;/th&gt;
          &lt;th class="text-center" colspan="7"&gt;November 2017&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th class="name"&gt;Name&lt;/th&gt;
          &lt;th class="day" data-date="20171124"&gt;24&lt;/th&gt;
          &lt;th class="day weekend" data-date="20171125"&gt;25&lt;/th&gt;
          &lt;th class="day weekend" data-date="20171126"&gt;26&lt;/th&gt;
          &lt;th class="day" data-date="20171127"&gt;27&lt;/th&gt;
          &lt;th class="day" data-date="20171128"&gt;28&lt;/th&gt;
          &lt;th class="day" data-date="20171129"&gt;29&lt;/th&gt;
          &lt;th class="day" data-date="20171130"&gt;30&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td class="name"&gt;User A&lt;/td&gt;
          &lt;td class="day user-rt" data-date="20171124" data-userid="1873"&gt;
            &amp;nbsp;
          &lt;/td&gt;
          &lt;td class="day weekend user-rt" data-date="20171125" data-userid="1873"&gt;
            &amp;nbsp;
          &lt;/td&gt;
          &lt;td class="day weekend user-rt" data-date="20171126" data-userid="1873"&gt;
            &amp;nbsp;
          &lt;/td&gt;
          &lt;td class="day user-rt" data-date="20171127" data-userid="1873"&gt;
            &amp;nbsp;
          &lt;/td&gt;
          &lt;td class="day user-rt" data-date="20171128" data-userid="1873"&gt;
            &amp;nbsp;
          &lt;/td&gt;
          &lt;td class="day user-rt" data-date="20171129" data-userid="1873"&gt;
            &amp;nbsp;
          &lt;/td&gt;
          &lt;td class="day user-rt" data-date="20171130" data-userid="1873"&gt;
            &amp;nbsp;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>