Ability to fix the width of a column in wide tables

  • 1
  • Idea
  • Updated 4 years ago
When a table renders wider than the browser window, setting fixed widths ("70px") for columns is overridden, and the column data & header scrolls automatically in HTML-determined places that I often don't want it to. I'd like the ability to force a column to be a certain width (or at least a minimum width) even if it is wider than the user's current browser window. For instance, in the case below, I'd want to force the columns to be always x pixels wide, because I know the exact max width of the data, and in some cases the width is static.
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb

Posted 5 years ago

  • 1
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Hi Peter,

Basically, when you add a width property to a column in a Skuid table, Skuid is adding that to a style tag on the table header or <th> tag. However, the actual <table> tag still has a width:100%; style property on it. Sometimes (actually oftentimes) the table tag and the elements inside the table have conflicting ideas about how wide a table should be. HTML standards provide browser makers with a way to decide what to do in these situations. So if you really want full control over the table and column widths, you'll have to override the width:100%; style property that Skuid is putting on the table. You could do this by going to the advanced properties of your table and giving your table a unique id. For example you could call it MySpecialTable. Then you could add a CSS resource to your page that contains this css.



#MySpecialTable table {
width: 2000px;
}


This will give you control over the width of the table as well as the width of the columns.
Photo of David Streja

David Streja

  • 270 Points 250 badge 2x thumb
I need to accomplish this exactly and I followed the instructions outlined by Ben. When I go to add the CSS the word  "table" in the CSS I am trying to add is RED. I can save the code but when I save the page and refresh it does nothing.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Make sure your ID on your table and the CSS class in your resources section match. 
Make sure you are using valid CSS syntax.  

You might look at this video where John walked through changing some of look and feel of page elements:  https://community.skuidify.com/skuid/topics/developer_talk_customizing_skuid_pages_with_css
Photo of David Streja

David Streja

  • 270 Points 250 badge 2x thumb
Rob...

Thank you for the prompt reply(ies). I know I posted the same type of comment on three different topics. Wasn't sure where ti would get covered. 

FollowUp: Is there a way to apply CSS to an entire column of results in a table. I know a I cna apply changes to alternate rows.

For example: Column 5 has a background of red. I'm assuming I have to use a custom field renderer on that field.

Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Hi David,

There is a way to do this without using a custom field renderer.  However, you have to specify the column number that you want to style with CSS.  This could cause a bit of a maintenance issue (since you'll have to adjust the CSS every time you move a column around or add one before it.)

If you're ok with that though, here is the css that would make the 3rd column of every table in skuid have a green background.

table.nx-skootable-data tbody tr td:nth-child(3) {    
    background-color: green;   
}
(Edited)