Question Styling: Simple Grid

This article will show you how to format/style items within this specific question type

Background

This article will help you style/format a Simple Grid. Here are a few things to note:

By default all grids will have no styles applied. Below is an example:
There are notes next to each line as well within the '/* xxx */'
You will see this as the default (All columns distributed evenly)
See the article following article if you have not added JavaScript and/or CSS to a question
- See article: Adding JavaScript and/or CSS to your Question

Grid Widths

Add the following to adjust Grid widths quickly. Add the code below to the question CSS. Adjust the 2 widths as needed.
*Note: There are built in options to change the widths in the Overall Question Settings also

Add the following to your '+ CSS'

/* GRID WIDTHS */
.cm-simple-grid__table {
table-layout: auto;
}

/* Attribute (LEFT-MOST COLUMN) */
.cm-simple-grid__table TD:first-child, .cm-simple-grid__table TH:first-child {
width: 50%;
}

/* Scale */ 
.cm-simple-grid__table TH.cm-simple-grid__column-header {
width: 10%;
}

Styling the Header Row

Add the following to your '+ CSS'

/*Styling the Header Row*/
 .cm-simple-grid__table TH {
    background: yellow; /* BACKGROUND COLOR OF THE ROW */
    color: green; /* FONT COLOR */
    font-weight: bold; /* MAKING THE TEXT BOLD */
    font-style: italic; /* HAVE THE TEXT IN ITALICS */
    text-align: left; /* HORIZONTAL TEXT ALIGNMENT - left, center, right */
    vertical-align: middle; /* VERTICAL TEXT ALIGNMENT - top, middle, bottom */
}

Styling the Group Header Row

Add the following to your '+ CSS'

/* Styling the Group Header Row */
td.cm-simple-grid__row-group-header {
    background: yellow; /* BACKGROUND COLOR OF THE ROW */
    color: green; /* FONT COLOR */
    font-weight: bold; /* MAKING THE TEXT BOLD */
    font-style: italic; /* HAVE THE TEXT IN ITALICS */
    text-align: left; /* HORIZONTAL TEXT ALIGNMENT - left, center, right */
    vertical-align: middle; /* VERTICAL TEXT ALIGNMENT - top, middle, bottom */
}

Styling the Attribute Row Column

In some cases you may need to adjust the column styling of the attribute rows. Using CSS you can adjust: background color, text color/alignment/formatting, column width etc.

Add the following to your '+ CSS'

/*Styling the Attribute Row Column*/
.cm-simple-grid__table TD:first-child, .cm-simple-grid__table TH:first-child {
    background: yellow; /* BACKGROUND COLOR OF THE ROW */
    color: green; /* FONT COLOR */
    font-weight: bold; /* MAKING THE TEXT BOLD */
    font-style: italic; /* HAVE THE TEXT IN ITALICS */
    text-align: left; /* HORIZONTAL TEXT ALIGNMENT - left, center, right */
    vertical-align: middle; /* VERTICAL TEXT ALIGNMENT - top, middle, bottom */
    width: 300px; /* COLUMN WIDTH - YOU CAN USE: % OR PX */
}

Styling the Response Columns

Add the following to your '+ CSS'

/*Styling the Response Columns*/
.cm-simple-grid__table TH.cm-simple-grid__column-header {
    background: yellow; /* BACKGROUND COLOR OF THE ROW */
    color: green; /* FONT COLOR */
    font-weight: bold; /* MAKING THE TEXT BOLD */
    font-style: italic; /* HAVE THE TEXT IN ITALICS */
    text-align: left; /* HORIZONTAL TEXT ALIGNMENT - left, center, right */
    vertical-align: middle; /* VERTICAL TEXT ALIGNMENT - top, middle, bottom */
    width: 100px; /* COLUMN WIDTH - YOU CAN USE: % OR PX */
}

Styling the Alternate Row Colors

Add the following to your '+ CSS' and adjust the hexadecimal color to the one needed.
*See 'Styling the Row Header' above for that portion. This will only shade the rows in grey in the image above.

/* EVEN ROWS */
.cm-simple-grid__table TR:nth-child(even) {
  background: #bbb;
}

/* ODD ROWS */
.cm-simple-grid__table TR:nth-child(odd) {
  background: #eee;
}

Alternate Column Colors

Add the following to your '+ CSS' and adjust the hexadecimal color to the one needed.
*See 'Styling the Row Header' above for that portion. This will only shade the rows in grey in the image above.

/* EVEN COLUMNS */
.cm-simple-grid__table TD:nth-child(even) {
  background: #bbb;
}

/* ODD COLUMNS */
.cm-simple-grid__table TD:nth-child(odd) {
  background: #eee;
}

Format a Specific Row

Add the following to your '+ CSS'
Update the row number below with the one desired. In this example we are referring to row number 4 in the code. This is inclusive of the attribute rows only. The header row is not included.

/* Format a Specific Row */
.cm-simple-grid__table TR:nth-child(4){
  background: #bbb;
}

Format a Specific Column (Without Corresponding Column Header)

Add the following to your '+ CSS'
Update the column number below with the one desired. In this example we are referring to column number 4 in the code. This is inclusive of the attribute column which is the fourth column from the left.

/* Format a Specific Column (Without Corresponding Column Header) */
.cm-simple-grid__table TD:nth-child(4){
  background: #bbb;
}

Format a Specific Column (With Corresponding Column Header)

/* Format a Specific Column (With Corresponding Column Header)  */ 
.cm-simple-grid__table TD:nth-child(4), .cm-simple-grid__table th:nth-child(4) {
	background: #eeeeee; /* background color */ 
	font-weight: bold;  /* bold text */ 
	font-style: italic; /* italicize text */ 
	color: red;  /* font color */ 
}

Format Last Column (With Corresponding Column Header)

Add the following to your '+ CSS'
This will always update the last column on the far right.

/* Format Last Column (With Corresponding Column Header)  */ 
.cm-simple-grid__table td:last-child, .cm-simple-grid__table th:last-child {
	background: #eeeeee; /* background color */ 
	font-weight: bold;  /* bold text */ 
	font-style: italic; /* italicize text */ 
	color: red;  /* font color */ 
}

Remove Grid Lines in the Header Row

Add the following to your '+ CSS'

/* REMOVE BORDERS AROUND HEADER ROW*/
.cm-simple-grid__table, th.cm-simple-grid__column-header, .cm-simple-grid__corner {
    BORDER: 0;
}

Add a Label to the Left of a Numeric Input

Add the following to the '+ CSS' field

.cm-numeric-input-container.cm-grid-cell:before {
	content: "$";
}

Add a Label to the Right of a Numeric Input

Add the following to the '+ CSS' field

.cm-numeric-input-container.cm-grid-cell:after {
	content: "%";
}

Numeric Input Width

Add the following to the '+ CSS' field

/* Numeric Input Width */
.cm-numeric-input-container input[type="number"] {
	width:3em;
}