Website Sorcery Website Design/Development/Architecture - ASP.NET, MVC, PHP, jQuery, HTML

As great as the ASP.NET MVC WebGrid is, it's very bland out of the box. Fortunately it's easy to style and this doesn't require much explanation. In two minutes flat you can have your WebGrid looking something like this:

Here's some starter code:

@grid.GetHtml(
        
            ...
        
        tableStyle: "webgrid",
        headerStyle: "webgrid-header",
        footerStyle: "webgrid-footer",
        alternatingRowStyle: "webgrid-alternating-row",
        selectedRowStyle: "webgrid-selected-row",
        rowStyle: "webgrid-row-style"
    )

Create a WebGrid.css style sheet and ensure you reference it from your _Layout.cshtml (or add the relevant styles to your Site.css if you prefer). Use the following as a start point which gives you the look and feel in the image above:

.webgrid
{
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
    border-collapse: collapse;
}

.webgrid a
{
    color: #000;
}

.webgrid-header
{
    padding: 0px 5px;
    text-align: center;
    border-bottom: 2px solid #739ace;
    height: 20px;
    border-top: 2px solid #D6E8FF;
    border-left: 2px solid #D6E8FF;
    border-right: 2px solid #D6E8FF;
}

.webgrid-header th
{
    background-color: #eaf0ff;
    border-right: 1px solid #ddd;
}

.webgrid-footer
{
    padding: 6px 5px;
    text-align: center;
    background-color: #e8eef4;
    border-top: 2px solid #3966A2;
    height: 25px;
    border-bottom: 2px solid #D6E8FF;
    border-left: 2px solid #D6E8FF;
    border-right: 2px solid #D6E8FF;
}

.webgrid-alternating-row
{
    height: 22px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #d2d2d2;
    border-left: 2px solid #D6E8FF;
    border-right: 2px solid #D6E8FF;
}

.webgrid-row-style
{
    height: 22px;
    border-bottom: 1px solid #d2d2d2;
    border-left: 2px solid #D6E8FF;
    border-right: 2px solid #D6E8FF;
}

.webgrid-selected-row
{
    font-weight: bold;
}

Enjoy!