jquery jtable child table title indent

Question

I am using jquery.jtable, and I have a rows which are calling the openChildTable method in jquery.jtable.js.

I am trying to find a way to indent the child table heading. Here's the code which creates the table:

function getResponseChildTable(ContainerID) {
    var table = {
        title: '',
        width: '5%',
        sorting: false,
        edit: false,
        create: false,
        display: function(data) {
            //create an image to be used to open child table
            var $img = $('<img src="' + config.base_url + 'assets/images/expand_row-small.png" title="View Responses" style="height:30px;width:30px;cursor:pointer;" height="30" width="30"/>');
            $img.click(function() {
                $('#' + ContainerID).jtable('openChildTable',
                        $img.closest('tr'),
                        {
                            title: 'Response Plans',
                            actions: {
                                listAction: config.base_url + "data_fetch/responses/" + data.record.risk_id
                            },
                            messages: defaultResponseMessages,
                            fields: getResponseFieldsSmall()
                        }, function(data) {//opened handler
                    data.childTable.jtable('load');
                });
            });
            //return image to show on row
            return $img;
        }
    };
    return table;
}

I tried adding a style property and setting a margin left to move it sideways, but that didn't work out. Maybe I did it wrong. So all suggestions are appreciated. I've posted links to what it looks like in the comments.

I am new to jquery.jtable and js, so kindly excuse my errors.

Answer 1

I was able to sole the problem using CSS.