how to fix table vertical scroll on the right

Question

I'm trying to find a way to fix my vertical scroll on the right of the table, but I can't find solutions, thank you in advance for anyone who can help.

screen size 937px by 937px

screen size 925px by 937px the scroll is gone...

Answer 1

I sometimes apply the next strategy when I have a table with a lot of rows and I need show it in small devices. It's has a drawback: you have some information duplicated. But is so simple to work with this table. The idea is merge some columns into a single one. Usually in differentes rows but it depends of the content of the row. Take a look:

<table class="your-table-class">
    <thead>
        <tr>
            <th>Status</th>
            <th class="main">
                Country
                <div class="secondary">
                    Destination<br />
                    Region
                </div>
            </th>
            <th class="secondary">Destination</th>
            <th class="secondary">Region</th>
            <th class="main">
                Date
                <div class="secondary">
                    Return Date
                </div>
            </th>
            <th class="secondary">Return Date</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Available</td>
            <td class="main">
                Brazil
                <div class="secondary">
                    Rio de Janeiro<br />
                    LA
                </div>
            </td>
            <td class="secondary">Rio de Janeiro</td>
            <td class="secondary">LA</td>
            <td class="main">
                09/10/2018
                <div class="secondary">
                    01/11/2018
                </div>
            </td>
            <td class="secondary">01/11/2018</td>
            <td>$1,000.00</td>
        </tr>
    </tbody>
</table>

The columns without class always are a single column. Columns with main class are single columns if you have space (big screen) but show the secondary values in small devices. Columns with only secondary class are shown only in big screen and hidden in small devices. So, in small device, you see this table:

          | Country        | Date        | 
Status    | Destination    | Return Date | Value
          | Region         |             |
----------------------------------------------------
Available | Brazil         | 09/10/2018  | $1,000.00
          | Rio de Janeiro | 01/11/2018  | 
          | LA             |             | 

Or maybe (in your case) joinning Brazil and LA:

          | Country        | Date        | 
Status    | Destination    | Return Date | Value
          | Region         |             |
----------------------------------------------------
Available | Brazil (LA)    | 09/10/2018  | $1,000.00
          | Rio de Janeiro | 01/11/2018  | 

You can add your styles to format the table and use different styles for main and secondary classes, trying to do secondary content smaller. Your problem is that the table don't become smaller and the right side are not shown and you can't see the scrollbar. With this focus, you can do your table lot smaller.

You can use this style to add "..." in text that is larger than the container. In that case I usually show a tooltip with the full content:

.ellipsis {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

And for special cases, like small columns that show emails, to allow break the email I use that:

.dont-break-out {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

I think you know: to choose the properties for main and secondary depending of browser/screen size you need CSS media queries. You can see some info, for example, here Media Queries: How to target desktop, tablet, and mobile?.

Using SASS, I have this example:

.your-table-class {
    & th.secondary, td.secondary {
        display: none;
    }

    & th.main .secondary, td.main .secondary {
        display: table-cell;
    }

    @media (min-width: 576px) {
        & th.secondary, td.secondary {
            display: table-cell;
        }

        & th.main .secondary, td.main .secondary {
            display: none;
        }
    }
}

You may increase the levels adding a third level if you need more control but usually with two levels is enought.

Having all the header's names allow you add sort for all columns, even when they are merged. But if don't need it, you can simplify the headers.