Hi @Finalplan ,

Directly you cannot add but a workaround could be that you can add a heading in the first option itself by using this style in the source of the options rich content editor

<table border="1" cellpadding="1" cellspacing="1">
    <tbody>
        <tr>
            <td style="width:150px;"><b>Colour</b></td>
        </tr>
        <tr>
            <td style="width:150px;">Black</td>
        </tr>
    </tbody>
</table>
 

And then having other options also in table format with this style in the source of the options rich content editor

<table border="1" cellpadding="1" cellspacing="1">
    <tbody>
        <tr>
            <td style="width:150px;">Blue</td>
        </tr>
    </tbody>
</table>

This is how it would look

Hi, try adding the below to the OnReady section of the question’s JavaScript. Adapted from here.

var qid = this.questionId;
var row1 = '#'+qid+' > div.Inner.BorderColor.SBSMatrix > div > fieldset > fieldset > div > table > tbody > tr:nth-child(1)';
var row3 = '#'+qid+' > div.Inner.BorderColor.SBSMatrix > div > fieldset > fieldset > div > table > tbody > tr:nth-child(3)';

//highest row number first//
jQuery(row3).before('<tr class="sbsheaderrow"><td class="sbsheadercell" colspan="100%">Light colors</td></tr>');
jQuery(row1).before('<tr class="sbsheaderrow"><td class="sbsheadercell" colspan="100%">Dark colors</td></tr>');	

jQuery(".sbsheaderrow").css({"background":"#D3D3D3"});
jQuery(".sbsheadercell").css({"text-align":"left", "color":"#000000", "padding-left":"2px"});