How to display long datas using horizontal scroller bar?

Shakell

I want to use horizontal scroller bar to display my datas. When the datas are short, it display well. But if it displays long datas, it doesn't work.

As the example mentions, https://datatables.net/examples/basic_init/scroll_x.html, I use DataTables with

        this.dataTable = table.DataTable({
          "pagingType": "full_numbers",
          "scrollX": true,
        });

I find there is no change in the table. The table looks like this:

So I set class nowrap and width:100% to the table.

                      <table class="display nowrap" cellspacing="0" style="width:100%">
                        <thead>
                          <tr>
                            <th *ngFor="let header of headers" >{{header.header}}</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr *ngFor="let rows of users">
                            <td *ngFor="let row of rows">{{row.value}}</td>
                          </tr>
                        </tbody>
                      </table>

Then there appears the scroller bar. But because all datas become one line display, the long data can't display well.

The result looks like this:

So how can I display long datas without using the class nowrap, or others solutions for displaying long datas with horizontal scroller bar will be welcomed.

allan

Do you have table-layout: fixed; in your CSS by any chance? If so, remove that and see if it fixes the layout.

Allan

Shakell

I removed all the table-layout: fixed in my CSS file, but it doesn't fix this issue.

allan

Can you link to the page showing the issue so I can help to debug it then please?

Allan

Shakell

https://www.wecard.org.cn/manager/membermanager

Here is the link, it has two tables whose scrollX is true, one has the class nowrap, the other doesn't.

allan

Thanks for the link. Remove:

    max-width: 150px;
    width: 150px;

from your CSS. That is what is causing the issue.

Allan