CODEWITHSUNDEEP
htmlcssasp.net-mvc
user1108948
user1108948

Reputation:

To the table all pretty with grid lines

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>

Upvotes: 1

Views: 4270

Answers (3)

Leniency
Leniency

Reputation: 5024

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>

Upvotes: 2

Rick Calder
Rick Calder

Reputation: 18695

Inline is going to suck, better in an external style sheet or at least in the head with:

​td{padding:5px 8px;border:1px solid #CCC;}​

If it has to be inline then

<td style="padding:5px 8px;border:1px solid #CCC;">

demo: http://jsfiddle.net/calder12/YTVzM/

Upvotes: 1

Kyle
Kyle

Reputation: 4449

You can apply some border stylings to the table in your CSS rules:

table tr {
    border: 1px solid black;
}
table td, table th {
    border-right: 1px solid black;
}

Most browsers still support <table border="1">, but it is not recommended to do anymore

Upvotes: 3

Related Questions