Ability to fix the width of a column in wide tables

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 tag. However, the actual 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.

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.

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.skuid.com/t/developer-talk-customizing-skuid-pages-with-css

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.

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) {&nbsp; &nbsp; <br>&nbsp; &nbsp; background-color: green; &nbsp;&nbsp;<br>}