Altering Column Width in Tables

While SurveyGizmo themes attempt to find the best fit for your tables based upon your survey width and the text used in the table, with some quick copy and paste CSS code you can force a different size for key columns in your table. In all cases, follow the steps below to make these changes.

Making changes to Look & Feel

• Select the Advanced... tab on the left side of Edit Survey > Look & Feel
• Choose the Append radio button and add the provided CSS code (below)
• Click Save Changes in the bottom right and Preview your survey to see the results

Make sure that your survey width is wide enough to support your tables. Under Look & Feel > Customize you can change the survey width (hint: try 1000 pixels)

Ready? Time for the CSS Code

The below section will apply to ALL tables in the survey equally.

Change the Width of the First Column (row headers)

The below code uses 200px as the width, however you can adjust this by increasing or decreasing the number.

.sg-type-table .sg-first-cell {
  width: 200px;
}

Change the Width of the Answer Columns

The below code uses 200px as the width, however you can adjust this by increasing or decreasing the number.

.sg-table td {
  width: 200px;
}

Apply Width to Specific Tables Only

You can edit any individual table question and click on the Formatting tab on the left side:

If each width is left blank, the system automatically calculates the best fit for the table based on the contents within the table. However, a numeric value can be added to force a particular width for the entire table, the answer columns, or the leftmost column (row headers).

The following method creates a new class that can be assigned to any table which should be affected. To simplify, picture that all tables with the name 'Bob' will have a width of 200px. You are assigning the name Bob to tables that should be a width of 200px (or whatever value you choose).

Under Edit Survey, edit the table question and go to the Formatting tab. Under Template CSS Hook, enter the following text exactly: table-width

Next, follow the same steps as the first section to Append CSS to your Look & Feel theme and use either or both of the following samples:

Change the Width of the First Column (row headers)

The below code uses 200px as the width, however you can adjust this by increasing or decreasing the number.

.table-width .sg-table .sg-first-cell {
  width: 200px;
}

Change the Width of the Answer Columns

The below code uses 200px as the width, however you can adjust this by increasing or decreasing the number.

.table-width .sg-table td {
  width: 200px;
}

These changes will only be present in a table which was assigned the table-width class in the first step.