Horizontal scroll + fixed width columns example

Horizontal scroll + fixed width columns example

SaatomeSaatome Posts: 2Questions: 1Answers: 0
edited September 2021 in DataTables 1.10

Link to test case: http://live.datatables.net/zidalazi/10/edit
Description of problem:
Hey guys! I'm looking for a working example of the datatables with horizontal scroll enabled and columns of fixed width.
So far I've found this example: http://live.datatables.net/zidalazi/10/edit. It's close to what I need, but it has a "nowrap" class and the width of the columns is changing dynamically.

What I want to have is the table with columns of fixed width, with content inside the columns wrapped, and with horizontal scrollbar enabled. Even though this example has the "autoWidth: false" option, removal of the "nowrap" class still causes the collapse of the columns and wrapping after each word.

Is it possible to have the setup I want?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,327Questions: 26Answers: 4,949
    Answer ✓

    Maybe adding the CSS table-layout: fixed; will help. See Allan's comments in this thread.

    Kevin

  • SaatomeSaatome Posts: 2Questions: 1Answers: 0
    edited September 2021

    Thanks for the quick answer, Kevin!

    I was able to achieve the desired result by removing the nowrap class, adding the table-layout: fixed; style to the table and setting the autoWidth: true as Allan suggested.

    However, with above settings I had to overwrite the autogenerated widths of needed columns with fixed width and !important flag.

    I have the result I wanted now, but the way I did it (with !important flag) seems kind of hackish to me. I think, there should be more elegant solution out there. I hope Allan can clarify it.

    Here is my current result:
    http://live.datatables.net/qezaluva/1/edit

Sign In or Register to comment.