Horizontal scroll does not appear for table with large columns

[jwag59]

When tables get a large number of columns or the column text is wide, all columns cannot fit on small screen sizes but no horizontal scrollbar is shown so some columns are simply not display and cannot been seen.

Is it possible to add a horizontal scrollbar when columns and/or text is wider than the physical screen dimensions?

Examples: Small screen (1920x1080):

And on a large screen (2560x1440):

[jwag59]

Regarding the last update to enable the horizontal/vertical scrollbar for a table. It is a little unlcear as to what the value for scroll_x and scroll_y represent. Do they represent screen pixels values? It seems it is something like that. Also when you specify scroll_x (I did not try scroll_y) all columns become the same width, so that columns with a single character of data are now as wide as columns with a long text string and the long text strings now wrap in the column whereas they did not do that before.) In general it is preferable that columns shrink down to the size of the data (or the column header, whichever is the larger). Is it possible just to have a simple scroll_x=True option to indicate a scrollbar should be added if necessary? Does antd/react not keep track of the screen width and allow you to display a horizontal scrollbar when needed (i.e. when the web page is wider than the screen's physical size)?

[bigeyex]

The scroll X thing is an Ant Design feature. Ant Design added lots of stuff to the table, so it's not wise for me to tamper with it on my first try.

Would you please give me a screenshot or two of how your table looks like when scroll_x is set?

[jwag59]

I am not a CSS specialist but I found this simply section of CSS which enables a scrollbar for a table when needed. Could this be used within adminui:

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

[jwag59]

OK I just noticed this CSS seems to already be used by adminui. So I don't know why it does not display a wide table as expected.

[jwag59]

So I just tried an experiment by changing the CSS for the .ant-table in src/global.less. I completely removed the following section:

@media (max-width: @screen-xs) {
  .ant-table {
    width: 100%;
    overflow-x: auto;
    &-thead > tr,
    &-tbody > tr {
      > th,
      > td {
        white-space: pre;
        > span {
          display: block;
        }
      }
    }
  }
}

and replaced it with this simple CSS block:

.ant-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

And voila ... believe it or not it works perfectly. On a screen that is wide enough no scroll-bar appears but on a screen which is too small then a scroll bar automatically appears (no table setting is needed. I mean scroll-x was not set). Also the columns stay as small as possible, just wide enough to hold the text. So for me this is a perfect solution. I wondered about the first line of the original settings using 'max-width: @screen-xs' but then again I don't know CSS that well. All I know is the simple settings I have used worked precisely as I wanted.

[bigeyex]

Ant Design has to take multiple screen sizes and responsive adaptation in mind, hence there are many arrangements. So for now, scroll_x (the size of the container on the x-axis in pixels) should be a fair solution, and btw you may set the width in the column definitions. Breaking Ant Design also prevents me from migrating adminui to a future version of Ant Design and makes the codebase less maintainable (but you may still change the CSS in the

[jwag59]

Nice tip on column widths in tables. Can you document how to do that? I don't currently see any mention of it. Are there any other 'hidden' options that we can make use of?

[jwag59]

I was able to implement this via added to a RawHTML element. So feel free to close this issue.