title: white box between scroll wheels
body: <p>I am having a bit of a CSS styling problem with an analytics dashboard that I am setting up. I've got the styling right for the table and scrollbars, but I cannot seem to figure out how to get rid of the white square in the bottom right hand corner of my table. I know that I can get rid of the horizontal scrollbar and that should fix the issue, however I need the scroll overflow in case there are long strings.</p>
  
  <p>Relevant CSS:</p>
  
  <pre><code>.keen-dataviz-table {
    border-bottom: 0px!important;
  }
  
  .keen-dataviz-table::-webkit-scrollbar {
    width: 12px;
  }
  
  .keen-dataviz-table::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  
  .keen-dataviz-table::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }
  </code></pre>
  
  <p>The chart HTML is generated by Keen.io, the only HTML I have on my page for this is the following:</p>
  
  <pre><code>&lt;div class="col-sm-4"&gt;
    &lt;div id="chart-01"&gt;&lt;/div&gt;
    &lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've attached an image below for reference (please ignore the silly intents, I was just stress-testing some NLP intents/entities and the horizontal overflow of this table).</p>
  
  <p>Any help would be greatly appreciated!</p>
  
  <p><a href="https://i.stack.imgur.com/VEnPE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VEnPE.png" alt="Example of CSS Styling issue"></a></p>