A while back i wrote about how to make alternate row colors in a datatable or xpages view.  I discovered that alternate row colors in a datatable was one of the bigger advantages over a standard repeat, just slightly less customizable.  Now i have another – Column Classes.  This is the same type attribute as rowclasses that i use for alternate row colors but it deals with columns instead.

So i had a datatable that had 5 columns next to each other which all contained numbers.  I wanted to separate those out from eachother, but not just use padding or white space to do so, so basically i wanted a grid.  So i created two new entries in the style sheet for the page.  They are as follows

.evencol {

border-left: 1px solid #E8E8E9;

border-right: 1px solid #E8E8E9;

padding-left: 3px;

}

.oddcol {

padding-left: 3px;

}

This adds a little padding to the left of the column and borders to the even columns, which takes care of the right side of the odd columns as well.  Combine that with the alternating row classes below

.oddrow {

background-color: rgb(248, 248, 248);

}

.evenrow {

}

and add those to the rowclasses and columnclasses in the ‘all properties’ of the datatable.

Then you get something that looks like this

Of course you could add background colors as well(not just padding and borders) if you want to get real fancy, and it will alternate the colors horizontally and vertically.

Now for highlighting, for that i use the hover property in css.  Add this to your style sheet and you will get row hovering and column hovering, but column hovering is really just cell hovering, since html table are made first of rows then columns.

.evenrow:Hover {

background-color: rgb(288, 250, 221);

}

.oddrow:Hover {

background-color: rgb(288, 250, 221);

}


.evencol:Hover {

background-color: rgb(222, 238, 248);

}

.oddcol:Hover {

background-color: rgb(222, 238, 248);

}

and you will get something like this, the mouse is hovering over the 8

 

6 Responses to XPages, Make your “Views” and datatables look nicer with some css

  1. Glenn Liwanag says:

    you saved my day. thanks for the post

  2. Jay says:

    thanks a lot for sharing this….

  3. COnstantinos says:

    i have a question. How will change color for selected row, just how we do it on Hover? Thanks

  4. Earnest says:

    Having read this I thought it was rather informative.
    I appreciate you spending some time and energy to put this information
    together. I once again find myself spending way too much time both reading and commenting.
    But so what, it was still worth it!

    Feel free to visit my homepage – seo rankings – Earnest,

  5. Prices of stands vary by size, material, purpose, and manufacturer.
    Apart from the teardrop banner, today we have bow banners, flag banners, spinning dart
    banners, flagpole banners, etc. give your old exhibit
    new life with earth friendly materials such as cotton graphics.

    Have a look at my web-site – Come visit us to learn more about banner stands

  6. Muhsin says:

    謝謝你的分享

Leave a Reply

Your email address will not be published. Required fields are marked *