Shrink table row height

  • 2
  • Question
  • Updated 3 years ago
How can I apply some CSS to make tables shrink down a bit? For instance, maybe reduce the font size or the spacing between the row text and the border, or order to fit more rows on the screen without scrolling down. I've tried various versions of the CSS below, but it doesn't seem to do anything.

nx-skootable th td { padding: 2px; }
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb

Posted 4 years ago

  • 2
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
How about this?

table.nx-skootable-data tbody .nx-fieldtext{
    padding: 0px;
}
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Peter,  precision of your selectors is going to be the biggest challenge here.  If you are not accurate enough,  your CSS will be overwritten by the standard styles.   Irvin has shown how to successfully remove padding from the field text.  There is also padding in the TD (Table Cell).  You could use a similar statement as is shown above to remove that. 
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
couldn't you just add a !important?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
You could do that,  but its not really reccomended CSS practice. 
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
Thanks Irvin, your exmple did shrink the padding down, such that the rows seem to be about 10% or so smaller in height. There's still whitespace in there that I'd love to control/remove, though, but can't seem to figure out how. Here's an example of the html of the page:


<table class="nx-list nx-skootable-data" cellpadding="0" cellspacing="0"><tbody class="nx-list-contents">
<tr class="nx-item">
<td><input type="checkbox" class="nx-skootable-rowselect"></td>
<td><div style="white-space: nowrap; margin: 3px;"><div class="nx-skootable-buttonicon sk-icon inline nx-skootable-buttonicon-visible sk-icon-edit editrow" title="Edit Row"></div><div class="nx-skootable-buttonicon sk-icon inline nx-skootable-buttonicon-visible ui-silk-application-form-magnify" title="View record details"></div></div></td>
<td><div class="nx-field" data-uid="27"><div class="nx-fieldtext"><div class="focusbox" tabindex="0"></div></div></div></td>
<td><div class="nx-field" data-uid="28"><div class="nx-fieldtext">31-12-2015<div class="focusbox" tabindex="0"></div></div></div></td>
<td><div class="nx-field" data-uid="29"><div class="nx-fieldtext"><a href="/00520000000t4ezAAA" tabindex="-1">Edwin Rooijakkers</a><div class="focusbox" tabindex="0"></div></div></div></td>
<td><div class="nx-field" data-uid="31"><div class="nx-fieldtext"><a href="/a08D00000143p0UIAQ">EVT  AgentschapNL/RVO nieuwe proces tools en andere zaken implementeren</a><div class="focusbox" tabindex="0"></div></div></div></td>
(Edited)
Photo of bp

bp

  • 220 Points 100 badge 2x thumb
Hi Peter, were you ever able to figure out a way to shrink table row height down further? 

Even with the css above, we're losing a lot of screen real estate on padding!
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
No, I wasn't. I do wish that there was an easy way to adjust table/row/cell padding overall. In some cases you want them nice and spaced out and easy to read, but in others you want it pretty dense. Maybe some of this is addressed in the latest (beta) release, since there was mention there about applying styles in a more comprehensive way, but I haven't looked into that yet.
Photo of bp

bp

  • 220 Points 100 badge 2x thumb
You're right. Banzai does look promising in this area. Can't wait to check it out! 
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
and we can't wait to show it off!!
Photo of bp

bp

  • 220 Points 100 badge 2x thumb
Banzai was great because you can set table cell padding to 0.

However, once you add a Row Action icon, the row height goes too big again. (See related post: https://community.skuidify.com/skuid/topics/make-row-action-icons-smaller.)

Uploading your own row action icon (as suggested in the related post) helps somewhat but not completely.