Tuesday, March 24, 2015

Re: Hide Column in CellTable

I see. On the <col> element you need to use "visibility:collapse" to hide the entire column. However browser support is pretty poor for it, seems to only work well in Firefox.

The other thread you have linked pretty much has all information available to solve your issue. Basically you have to show/hide each cell in a column like the guy in the last post did with JQuery.

If the number of columns in your table is fixed and known then you could also use the following css (example for 3 columns):

/* thead: th cells */
.hide-col-1 th:nth-of-type(1),
.hide-col-2 th:nth-of-type(2),
.hide-col-3 th:nth-of-type(3),
/* tbody/tfoot: td cells */
.hide-col-1 td:nth-of-type(1),
.hide-col-2 td:nth-of-type(2),
.hide-col-3 td:nth-of-type(3) {
    display:none;
}

Then you can add/remove "hide-col-1" to the table and the corresponding column will be hidden. Here is a jsfiddle that hides the second column: http://jsfiddle.net/odbqq04x/

-- J.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment