Css – Interleave row/column colors in a GridView

asp.netcssgridview

Suppose you have a GridView with a few columns like:

| Foo | Bar | Total |

and you use a style sheet to make the alternating rows different colors, say light blue and white.

Is there a good way to make a particular column alternate in a different color? For example, I might want the Total column to alternate in medium and light red to bring attention to it in a large grid.

BTW, I know you can programmatically change the color of a cell. I'd like to stick to CSS if it all possible, however, so all my style stuff is in one place. I also don't see an easy way to tell if I'm in an alternating row when I'm inside the event handler.

Best Solution

If you're using jQuery, you can do it pretty easily.

$("table#myTable col:odd").css("background-color:#ffe");

the :odd selector is not available in most current browsers, but jQuery gives it to us today.

For rows, you can do it with the built-in AlternatingRowStyle element.

Edit: found a good resource for some different ways of doing this: http://css-discuss.incutio.com/?page=StylingColumns

Approach 1 (offsets):

The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2.

In markup this would look like:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Now, there's an obvious drawback for this method. It only works for even column sizes, so only .col-X-2, .col-X-4, col-X-6, col-X-8, and col-X-10 are supported.

Approach 2 (the old `margin:auto`)

You can center any column size by using the proven margin: 0 auto; technique. You just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:

.col-centered{
    float: none;
    margin: 0 auto;
}

Now you can add it to any column size at any screen size, and it will work seamlessly with Bootstrap's responsive layout:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Note: With both techniques you could skip the .row element and have the column centered inside a .container, but you would notice a minimal difference in the actual column size because of the padding in the container class.

Update:

Since v3.0.1 Bootstrap has a built-in class named center-block that uses margin: 0 auto, but is missing float:none, you can add that to your CSS to make it work with the grid system.

Best Solution

Related Solutions

Css – ASP.NET GridView CSS issue when sorting turned on

Css – Center a column using Twitter Bootstrap 3

Approach 1 (offsets):

Approach 2 (the old margin:auto)

Related Question

Approach 2 (the old `margin:auto`)