title: How can I give my table an overflow on the x-axis?
body: <p>I would like to make my table scrollable on the x-axis so as to allow some form of responsiveness for mobile users. I actually did try adding an <code>overflow-x: auto;</code> to the content-table class hoping it would show up, but no luck so far</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>.content-table {
      border-collapse: collapse !important;
      margin: 0 auto;
      width: 100% !important;
      border-radius: 4px;
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      background: #fff;
      overflow-x: auto;
  }
  
  .content-table thead tr {
      background: #f0f7ff;
      color: #00639e;
      text-align: left;
      font-weight: 700;
  }
  
  .content-table th {
      padding: 10px 15px;
      font-size: 0.75rem;
  }
  
  .content-table td {
      padding: 8px 10px;
      font-size: 0.75rem;
  }
  
  .content-table tbody tr {
      border-bottom: 1px solid #dddddd;
      transition: 0.15s ease-in;
      font-weight: 500;
      color: #444444;
  }
  
  .content-table tbody tr:hover {
      background: rgb(251, 245, 233);
      color: #ef822e;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="table mt-3"&gt;
    &lt;table class="content-table"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Hello world&lt;/th&gt;
          &lt;th&gt;Hello world&lt;/th&gt;
          &lt;th&gt;Hello world&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;th&gt;Hello world&lt;/th&gt;
          &lt;th&gt;Hello world&lt;/th&gt;
          &lt;th&gt;Hello world&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr class="active-row"&gt;
          &lt;th&gt;Hello world&lt;/th&gt;
          &lt;th&gt;Hello world&lt;/th&gt;
          &lt;th&gt;Hello world&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Hello world&lt;/th&gt;
          &lt;th&gt;Hello world&lt;/th&gt;
          &lt;th&gt;Hello world&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>