Current build version of WebGrid doesn’t provide style customization over child table yet. So, I’m afraid that currently it is not possible to put a border along the bottom of the child table.

The empty column at the left is the column that is used as the row selector of the child table. Please try to set the RowHeaders property in the LayoutSettings of WebGrid to “No” in order to losing the empty columns at the left.

...
<LayoutSettings Hierarchical="True" AllowFilter="Yes" AllowExport="Yes" RowHeaders="No">
</LayoutSettings>
...

WebGrid has HidePadColumn property which hides the pad column (a small section of the column headers above the vertical scrollbar). Please try to disable this property in window on load JavaScript function in order to losing the emptly columns at the right.

Hope this helps.

Thanks for that but it didn't work for the child table

I have however managed to reduce the right hand column of the root table to about 2 pixels.

The oninitialize event of the child table never seems to fire though so the right hand column remains there. So far I have this and it seems to do absolutely nothing

            childtable.RowHeaders = RowHeaders.No;

            childtable.Layout.RowHeaders = RowHeaders.No;

            childtable.Layout.AutoFitColumns = true;

            childtable.Layout.ClientSideEvents.OnInitialize = " ChildTable1_OnInitialize()";

            childtable.Layout.ClientSideEvents.OnAfterInitialize = " ChildTable1_OnInitialize()";

My grid looks a mess right now and I need to show the customer something more professional that this.

Any help appreciated.

Sorry for the late respond.

I’m willing to advice you further but in order to do so I would need you to elaborate on your specific scenario and possibly give us a running simple sample and a step-by-step guide that we can use to observe the problem.