How to prevent line wrapping in a large table

How to prevent line wrapping in a large table

  

Hello, 

I am trying to disallow line wrapping on certain columns in a table record list. The table has more than a dozen columns in it, several of which are dates. 

One of the requirements for this table is that these date columns should be displayed in single lines (no line wrapping allowed). Horizontal scrolling is acceptable in order to show all of the required columns, but I have not seen a way to allow this.

I have tried adding the "nowrap" property to the expressions holding the dates, as well as the containers or cells they are in, but this has not changed anything.

I have also tried setting the width for the date columns, but since there are so many columns in the table it looks like this is being overridden due to the maximum width of the table.

How to I force the date columns in my table to display without line wrapping?

I should mention also that I am currently working in version 9.1.400.0

Solution

Hello Cody,

Put a container around the table.
Set the container's style to this:

overflow-x: auto;
white-space: nowrap;

This should prevent text in columns (all columns) of breaking to a new line and add a scroll bar at the bottom of the div if the table don't fit the screen.

It is possible to select only some of the columns to apply the white-space: nowrap, but it's a little more tricky... :)

Cheers,
Eduardo Jauch

Solution

Thank you, it looks like this solution will suit my needs.