Topic: MDBTable horizontal scroll?

Bridget Melvin premium asked 1 year ago

Expected behavior I would like an overflow like property for a table with too many columns such that no columns get squished/resize and it is possible to scroll horizontally. How do I accomplish this with MDBTable?

Bridget Melvin premium commented 1 year ago

further, is it possible to make the first column sticky?

Bridget Melvin premium answered 1 year ago

I have made the first three columns sticky as desired but the first non-sticky item hides behind the sticky columns on overflow. Do you know how I can fix this?

const TableDiv = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  max-width: 1100px!important;

  overflow-x: auto;

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;

  &::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;

  &::-webkit-scrollbar-thumb:hover {
    background: #555;

const Table = styled(MDBTable)`
  && {
    align-self: center;
    width: auto;
    max-width: 80vw!important;

    overflow-x: auto;

    & tr, td {
      background-color: #fff;

    background-color: #fff;
    z-index: 2;

    & :not(caption) > * > * {
      border: 0;

    & .float-right {
      text-align: right!important;

    & .item, .label {
      text-align: left;
      background-color: #fff;

    & td, th {
      position: relative;
      text-align: center;
      transition: width 2s ease, min-width 2s ease, max-width 2s ease;
      z-index: 1;

    & tr th:first-child, tr td:nth-child(-n + 2) {
      position: sticky;
      left: 0;
      z-index: 3;

    & tr th:nth-child(n + 2), tr td:nth-child(n + 2) {
      margin-left: 162px;

    & tr td:nth-child(2) {
      position: sticky;
      left: 17px;
      z-index: 3;

      border-left-width: 0;



Wojciech Staniszewski staff commented 1 year ago

Not really, I need more code (for example Table with data)

Just wrap MDBTable like here:

        <div style={{ overflowX: 'auto' }}>
                <th scope='col'>#</th>
                <th scope='col'>First</th>
                <th scope='col'>Last</th>
                <th scope='col'>Handle</th>
                <th scope='row'>1</th>
                <th scope='row'>2</th>
                <th scope='row'>3</th>
                <td colSpan={2}>Larry the Bird</td>

About the sticky column, it's only possible in MDBDatatable.

Wojciech Staniszewski staff commented 1 year ago

Although, you can check how it is done and create your own mechanism :)

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 4.1.0
  • Device: Surface Laptop Studio
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No