How can I give my table an overflow on the x-axis?

June 9, 2022

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 overflow-x: auto; to the content-table class hoping it would show up, but no luck so far

.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;
}

<div class="table mt-3">
  <table class="content-table">
    <thead>
      <tr>
        <th>Hello world</th>
        <th>Hello world</th>
        <th>Hello world</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Hello world</th>
        <th>Hello world</th>
        <th>Hello world</th>
      </tr>
      <tr class="active-row">
        <th>Hello world</th>
        <th>Hello world</th>
        <th>Hello world</th>
      </tr>
      <tr>
        <th>Hello world</th>
        <th>Hello world</th>
        <th>Hello world</th>
      </tr>
    </tbody>
  </table>
</div>

>Solution :

Try adding overflow-x: auto; property to parent div of table. and you can add minimum width to table to make it scroll just like I have added 800px to show scroll over here you can reduce it according to you.

.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;
   min-width: 800px;
}

.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;
}

.tableResponsive {
  overflow-x: auto; 
}

<div class="table tableResponsive mt-3">
  <table class="content-table">
    <thead>
      <tr>
        <th>Hello world</th>
        <th>Hello world</th>
        <th>Hello world</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Hello world</th>
        <th>Hello world</th>
        <th>Hello world</th>
      </tr>
      <tr class="active-row">
        <th>Hello world</th>
        <th>Hello world</th>
        <th>Hello world</th>
      </tr>
      <tr>
        <th>Hello world</th>
        <th>Hello world</th>
        <th>Hello world</th>
      </tr>
    </tbody>
  </table>
</div>