Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Good CSS table theming tool?

It's been a long time since I've styled a table. I've got three different tables I need to style that all are going to use the same basic colors etc, but are all different shapes/sizes.

I'm wondering if anyone knows a good library or tool for generating nice html/css tables from JSON or something (you feed some JS or PHP a data structure, JSON or Arrays, and it spits out an HTML/CSS table)? Yes, I'm using them for tabular data (they are pricing sheets). Or if there is a good non-table driven alternative for displaying tabular data, I'm all ears...

Here's an example of what the background portion of the table is going to look like. Each table is going to have a different statically "highlighted" column (or none at all); this is not a hover effect, just a called out column.

enter image description here

like image 939
cmcculloh Avatar asked Jul 16 '11 03:07

cmcculloh


2 Answers

Here's another try: http://jsfiddle.net/wwntH/4/

enter image description here

like image 174
Eric Avatar answered Nov 08 '22 19:11

Eric


This is my attempt http://jsfiddle.net/WsheP/ enter image description here

/* you may play with this in javascript to achieve your hover highlight */
table td:nth-child(2) {
   background-color: #f5772e;
   border-left: 2px solid #888;
   border-right: 2px solid #888;
 } 

OR take a look to this plugin for the column highlight on hover.

Notes: you'll need to add a texture to the th to match yours, and suit the gradients to your need.

like image 28
Eric Fortis Avatar answered Nov 08 '22 20:11

Eric Fortis