Skip to content

Applying the same style to multiple columns

Answer

Use the "Field CSS" and "Control CSS" functions.

Overview

When applying the same style to multiple columns, you can apply CSS to the selector of each column individually. However, by using the "Field CSS" and "Control CSS" functions, you can set the same content with one class selector.

Operation

The following is the setting method for changing the background color of the Category A, NumA, and DateA columns to yellow on the editing screen.

  1. Open the target table.
  2. Click Manage → Manage Table.
  3. Select the Editor Tab.
  4. Select the ClassA column from the current settings and click the Advanced Settings button.
  5. Enter any name in "Field CSS" and "Control CSS".
    *In this example, enter "color-yellow".
  6. Repeat steps 4 and 5 for the NumA and DateA columns.
  7. Open the "Style" tab.
  8. Click the New button to display the dialog.
  9. Enter any title, such as "Make the background color of Category A, NumA, and DateA columns yellow" in the title.
  10. Enter the following style in the style field.
CSS

.color-yellow input{
    background-color:yellow;
}

11. Uncheck "All" for the output destination and check only "Edit".
12. Click the Change button in the dialog.
13. Click the Update button at the bottom of the screen.
14. Check the edit screen of the target table and confirm that the background of the columns ClassA, NumA, and DateA is yellow.

*5 If you want to set multiple classes, enter them separated by a space.
（Example）
"color-yellow textcolor-red"