Set size of neoTable Rows and Fonts - Forum

Forum Navigation
Climate strike banner
You need to log in to create posts and topics.

Set size of neoTable Rows and Fonts

I have a requirement to show a lot of table data on the viewer's screen (without the need to scroll) ... so I have to show more rows and columns in the same screen space.

I can control (reduce) the width of columns by using Column Width parameter in neoTableSetColumn .

How can I reduce the height of rows (and the font size of text) ? ... are there CSS classes I can reference ?

 

Hi @gaev,

Normally the row height is as higher as the content it has.
Anyway, you can style directly any table aspect using html elements in your CSS. For instance:

td{font-size:10pt}

If you only want to style a neoTable table and not any other one, just use its name as a prefix in CSS. Any neoTable table has an name identical to the Container plus "neoTable". For example if your Container id is "Container1" your neoTable generated table id will be "Container1neoTable"

#Container1neoTable td{font-size:10pt}

But i think it is quite better to use the "Subroutine to format the data" in neoTableSetColumn command to change any data visual aspect.
Let me know if you need a sample.

Best regards.

@luishp

#Container1neoTable td{font-size:10pt}

That was my initial thought.

Normally the row height is as higher as the content it has.

Good to know; I was afraid Bootstrap and/or Table-plugin had some special/designated classes for the rows/cells.

But i think it is quite better to use the "Subroutine to format the data" in neoTableSetColumn command to change any data visual aspect.

I'll try both solutions and report any pros/cons of either method.

 

I should have included this topic in the Tutorial.

Thanks.

@luishp

1) font-size property by itself does not help ... just leaves more white space above/below the text.

2) height property for td elements is no longer supported in HTML5

3) through trial and error, I found that the padding property needed to be reduced ... this worked ...

#myContainerID td {
font-size: 10px;
padding: 2px;
}

... and for the Table Header Row ...

#myContainerID thead div {
font-size: 10px;
font-weight: 100;
padding: 0px;
}