how to indent jqgrid table? - css

Question

How can I have the table in this example indented, I would like to have white space on the side of the 2 rows and the header, basically I'd like a white margin on the left of everything below "Stackoverflow example".
It would be great if I could do it only with css.
Here is the code:
var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]];
$("#grid").jqGrid({
datatype: "local",
height: 250,
colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
colModel: [{
name: 'id',
index: 'id',
width: 60,
sorttype: "int"},
{
name: 'thingy',
index: 'thingy',
width: 90,
sorttype: "date"},
{
name: 'blank',
index: 'blank',
width: 30},
{
name: 'number',
index: 'number',
width: 80,
sorttype: "float"},
{
name: 'status',
index: 'status',
width: 80,
sorttype: "float"}
],
caption: "Stack Overflow Example",
// ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});
var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];
for (var i = 0; i < data.length; i++) {
mydata[i] = {};
for (var j = 0; j < data[i].length; j++) {
mydata[i][names[j]] = data[i][j];
}
}
for (var i = 0; i <= mydata.length; i++) {
$("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}
/*
$("#grid").jqGrid('setGridParam', {onSelectRow: function(rowid,iRow,iCol,e){alert('row clicked');}});
*/
$("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}});

Answer 1

Here's a CSS-only solution. There is still a challenge for you when resizing columns. As you click and drag to resize, the vertical marker still shows at the original offset.
#gbox_grid, .ui-jqgrid .ui-jqgrid-titlebar {
padding-right: 20px;
}
.ui-jqgrid .ui-jqgrid-hdiv, .ui-jqgrid .ui-jqgrid-bdiv {
margin-left: 20px;
}
.ui-jqgrid .ui-jqgrid-titlebar {
margin-right: -20px;
}
.ui-jqgrid tr.jqgrow td:first-child {
border-left-style: solid;
border-left-color: inherit;
}
http://jsfiddle.net/meharg/8BkMw/4/

Answer 2

Because this is loaded after the CSS is parsed it will be hard to do it without a little JS if you are picky about the position of your script and style, here is what works without you needing to worrie about anything. Although i don't think it will work regardless of the style and script position if you want only a CSS solution as the table is generated after it gets parsed anyway.
http://jsfiddle.net/yNw3C/1534/embedded/result/
I added some comments where i added the code.
Edit, forgot to add the editable fiddle: http://jsfiddle.net/yNw3C/1539/