Question

I have a view in asp.net MVC 3 project. So far so good but all the context are packed together.
I just want this table has solid boundrys.

Is there a simple CSS(inline)?

 <table>
    <thead>
        <tr>
            <td>ID</td>
            <td>PIN</td>
            <td>First Name</td>
            <td>Middle Name</td>
            <td>Last Name</td>
        </tr>
    </thead>
    @foreach (var r in ViewBag.collections)
    { 
        <tr>
            <td>@r.IDNumber</td>
            <td>@r.PIN</td>
            <td>@r.FirstName</td>
            <td>@r.MiddleName</td>
            <td>@r.LastName</td>
        </tr>
    }
</table>

Answer 1

Solid boundries where? Around each cell, row, the whole table, all of the above? Not sure exactly what you’re looking for. The others answered about table borders.

If you’re looking for zebra stripping, there are a few ways to do this:

CSS 3

Not supported in IE <= 8

<style>
    tbody > tr:nth-child(odd) { background-color: #eee; }
    tbody > tr:nth-child(even) { background-color: #eee; }
<style>

In Code

Just add two css classes: `tr.odd` and `tr.even`

<style>
    .odd { background-color: #eee; }
    .even { background-color: #eee; }
<style>

Then in your view:

var i = 0;
@foreach (var r in ViewBag.collections)
{ 
    var rowClass = i++ % 2 == 0 ? "even" : "odd"
    <tr class="@rowClass">
        ...
    </tr>
}

With JQuery

Add the above odd/even css classes.

<script>
    $(function() {
        $('tbody > tr:odd').addClass('odd');
        $('tbody > tr:even').addClass('even');
    });
</script>