Vue CoreUI CDatatable horizontal scroll with too many columns

I’m using Vue CoreUI admin template for a project, and I have a CDataTable. However, I have too many columns and instead of squishing them like you see in the screenshot, I’d like to have a horizontal scroll and just scroll to the right to see the other columns.

Any advice? Here is my code and the screenshot of what it looks like right now.

Code:

<template>
  <div>
    <CCard v-if="tableFields.length > 0">
      <CCardHeader>
        <slot name="header">Inventory list of vehicles</slot>
      </CCardHeader>
      <CCardBody>
        <CDataTable
          :fields="tableFields"
          :items="tableItems"
          :striped="true"
          :items-per-page="10"
          :fixed="true"
          :clickable-rows="true"
          table-filter
          sorter
        >
        </CDataTable>
      </CCardBody>
    </CCard>
  </div>
</template>

Screenshot:
DataTable screenshot