Skip to main content

Kinesis Support

All the topics, resources needed for Kinesis.


FocusVision Knowledge Base

Custom Table Examples

Sometimes you will want to present more than one matrix from left to right on the same pagebreak. This can be a little tricky, so here is an example to help breakdown what is required.

The first thing you need to do is create your tables. You will also need to create an Extra text question right before your first table -- this question will be used to add in the CSS needed to make the tables go from left to right.

You will then need to add the following CSS inside the HTML of Qcss:


table.questiontable.matrix {
position: absolute;
top: 170px;

table.questiontexttable {
position: absolute;
top: 135px;

table.questiontexttable:nth-of-type(3), table.questiontable.matrix:nth-of-type(4) {
left: 337px;
table.questiontexttable:nth-of-type(5), table.questiontable.matrix:nth-of-type(6) {
left: 656px;

<div style="height: 220px;"> </div>

Note: You will notice that there is an empty div after the style tag. This is because we are positioning our tables absolutely which makes our footer / continue button render near the top of the screen. The blank div has a height attribute that will move the footer / continue bottom underneath the tables.

Here is how the tables will be displayed when taking the survey. I also added a breakdown of the different properties used:

Note: This is only an example for a three matrix. You will have to play with all the numbers in the CSS to get the tables (and footer / continue button) exactly where you need them.

  • Was this article helpful?