CTAT: Cognitive Tutor Authoring Tools

CTATTable Example

A simple table example.

This table will expand if 'addRow' or 'addCol' interface actions are executed. To change the cell size, override with:
#expanding_table .CTATTable--cell { width: x; height: y; }
 
<div id="my_table" class="CTATTable"
     data-ctat-num-rows="5"
     data-ctat-num-cols="5"
     data-ctat-has-header="true">
</div>
	  

To have it expand to the available space if you set the width and height of the CTATTable:
#const_table .CTATTable--cell { flex: 1 1; width: inherit; height: inherit; }
Add the following to make sure the table does not grow beyond the specified height:
#const_table .CTATTable--row { flex: 1 1; }

 
<div id="const_table" class="CTATTable"
     data-ctat-num-rows="5"
     data-ctat-num-cols="5"
     data-ctat-has-header="true"
     style="width: 250px; height: 200px;">
</div>