Skip to main content
If you want to completely hide a column in a repeating table, you will need to use some custom CSS to do so. This is due to the fact that hiding a sub-question using the Flow Designer will only hide the question on the form. It will not hide the cell in the table, so CSS is used to hide the HTML elements rather than the question itself. This also means it will only hide the column; the column will still contain all functionality of a shown column. Depending on how you set up the repeating table and how many columns you want to hide will decide which selection of code below will need to be used. If you want to hide 1 specific column, or all columns after the 3rd one, or if you have the “remove row button” or fixed rows icons showing, you will need to use different code. The options are:

​
Hide the last column, with the remove row button

[data-question-id="290"] table.repeatingTable th:last-child,
[data-question-id="290"] table.repeatingTable:not(.displayMode) > tbody > tr > td:nth-last-child(2),
[data-question-id="290"] table.repeatingTable.displayMode > tbody > tr > td:last-child,
[data-question-id="290"] table.repeatingTable > tfoot > tr > td:last-child {
display:none !important; }

​
Hide the last column, without the remove row button

[data-question-id="290"] table.repeatingTable th:last-child,
[data-question-id="290"] table.repeatingTable:not(.displayMode) > tbody > tr > td:last-child,
[data-question-id="290"] table.repeatingTable.displayMode > tbody > tr > td:last-child,
[data-question-id="290"] table.repeatingTable > tfoot > tr > td:last-child {
display:none !important; }

​
Hide all columns after the 5th column, with the remove row button

[data-question-id="290"] table.repeatingTable th:nth-child(n+6),
[data-question-id="290"] table.repeatingTable:not(.displayMode) > tbody > tr > td:nth-child(n+6):not(:last-child),
[data-question-id="290"] table.repeatingTable.displayMode > tbody > tr > td:nth-child(n+6),
[data-question-id="290"] table.repeatingTable > tfoot > tr > td:nth-child(n+6) {
display:none !important; }

​
Hide all columns after the 5th column, without the remove row button

[data-question-id="290"] table.repeatingTable th:nth-child(n+6),
[data-question-id="290"] table.repeatingTable:not(.displayMode) > tbody > tr > td:nth-child(n+6),
[data-question-id="290"] table.repeatingTable.displayMode > tbody > tr > td:nth-child(n+6),
[data-question-id="290"] table.repeatingTable > tfoot > tr > td:nth-child(n+6) {
display:none !important; }

​
Hide a specific column, in this example the 5th column

[data-question-id="290"] table.repeatingTable th:nth-child(5),
[data-question-id="290"] table.repeatingTable:not(.displayMode) > tbody > tr > td:nth-child(5),
[data-question-id="290"] table.repeatingTable.displayMode > tbody > tr > td:nth-child(5),
[data-question-id="290"] table.repeatingTable > tfoot > tr > td:nth-child(5) {
display:none !important; }