Question

Can somebody help me override the jquery UI css?

I need to get something like below image

and I got

If not possible, then probably help me out

1. getting spaces between each panels like in the 1st picture
2. and no border for the panel content as it is in the 1st image.

My Panel (only 1 of them)

<div title="Repository Properties" class="class">
    <table style="width:100%; align:left;">
        <tbody>
            <tr>
                <th class="thPanel" align="left">Home</th>
                <td align="left">test</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.thPanel
{
    font-size:11px;
    width:22%;
}
.class
{
    font-size:15px;
    border-style:none;
}

Any help would be great! Thanks

UPDATE

If I add the below css, it works, but it also affects all the other ui stuff on the page, which i don’t want, any help?

.ui-widget-content{border-style:none;}

Answer 1

Try adding this to your .class style:

padding: 10px 0;