I'm still using dojo 0.4.3 version and not upgraded to 0.9 vesion simply because 0.4 vesion has the filtering table widget and it is is not yet ported to 0.9 relase.
This CSS style is dedicted to all those love dojo 0.4.x Filtering Table.
Although this code is written to use with the filtering table, it woks fine with all tables.
What to do is just include the below CSS in your page and add the class="xxx" to your html table/filtering table.
http://dojotoolkit.org/book/dojo-porting-guide-0-4-x-0-9/widgets/filteringtable CSS Code
/** * @author mithun */
table{ margin: auto;
border-collapse:collapse;
font-family:Lucida Grande, Verdana;
font-size:16px;
text-align: center;
width:80%;
}
table td,table th{
padding:2px;
font-weight:normal;
padding: 2px;
}
table th{
font-weight:bold;
}
table.aquamarine{
border: 1px solid #050;
}
table.aquamarine tr th,
table.aquamarine tr td{
border: 1px dotted #050;
}
table.aquamarine tr th{
background-color: #48a474;
color: #ccffcc;
}
table.aquamarine tr td{
background-color: #ded;
}
table.aquamarine tr.alt td{
background-color: #b8dcc1;
}
table.aquamarine tr:hover td{
background-color: #7fc08f;
color: #ccffcc;
}
table.blue{
border: 1px solid #94beff;
}
table.blue tr th,
table.blue tr td{
border: 1px dotted #94beff;
}
table.blue td, table th {
background-color: #94beff;
background-image:url(../images/bg-head.gif);
background-repeat:no-repeat;
background-position:top right;
}
table.blue td.selectedUp,
table th.selectedUp {
background-image:url(../images/bg-headup.gif);
}
table.blue td.selectedDown,
table th.selectedDown {
background-image:url(../images/bg-headdown.gif);
}
table.blue tr td{
background: #fff;
}
table.blue tr.alt td{
background: #e3edfa;
}
table.blue tr.selected td{
background: yellow;
}
table.blue tr:hover td{
background: #a6c2e7;
}
table.blue tr.selected:hover td{
background:#ff9;}table.cool{
border: 1px solid #6BB12B;
}
table.cool tr th,
table.cool tr td{
border: 1px dotted #91d552;
}
table.cool tr th{
background-color: #91d552;
color: #000;
}
table.cool tr td{
background-color: #d5f7b5;
}
table.cool tr.alt td{
background-color: #e7fad5;
}
table.cool tr:hover td{
background-color: #b1f075;
color: #333;
}
table.cyan{
border: 1px solid #2b8383;
}
table.cyan tr th,
table.cyan tr td{
border: 1px dotted #2b8383;
}
table.cyan tr th{
background-color: #099;
color: #cfc;
}
table.cyan tr td{
background-color: #e5f5f5;
}
table.cyan tr.alt td{
background-color: #d1f0f0;
}
table.cyan tr:hover td{
background-color: #a5e1e0;
color: #366;
}table.green{
border: 1px solid #00B366;
}
table.green tr th,
table.green tr td{
border: 1px dotted #00B366;
}
table.green tr th{
background-color: #167a61;
color: #cfc;
}
table.green tr td{
background-color: #569591;
}
table.green tr.alt td{
background-color: #63a8a8;
}
table.green tr:hover td{
background-color: #167a61;
color: #cfc;
}
table.nature{
border: 1px solid #4b6c15;
color: #040;
}
table.nature tr th,
table.nature tr td{
border: 1px dotted #4b6c15;
}
table.nature tr th{
background-color: #4b6c15;
color: #fff;
}
table.nature tr td{
background-color: #d9e8af;
}
table.nature tr.alt td{
background-color: #bcd671;
}
table.nature tr:hover td{
background: #73a800;
}
table.orange{
color: #400;
border: 1px solid #f93;
}
table.orange tr th,
table.orange tr td{
border: 1px dotted #f93;
}
table.orange tr th{
background-color: #fc0;
}
table.orange tr td{
background-color: #feb;
}
table.orange tr.alt td{
background-color: #fe9;
}
table.orange tr.selected td{
background-color: #fc9;
}
table.orange tr:hover td{
background: #fd8;
}
table.orange tr.selected:hover td{
background:#fcb;
}
table.olive{
border: 1px solid #090;
color: #040;
}
table.olive tr th,
table.olive tr td{
border: 1px dotted #090;
}
table.olive tr th{
background-color: #4B6C15;
color: #fff;
}
table.olive tr td{
background-color: #dfd;
}
table.olive tr.alt td{
background-color: #dfe;
}
table.olive tr.selected td{
background-color: #9dc;
}
table.olive tr:hover td{
background: #bfb;
}
table.olive tr.selected:hover td{
background:#9ca;
}
table.pink{
border: 1px solid #faa;
color: #400;
}
table.pink tr th,
table.pink tr td{
border: 1px dotted #faa;
}
table.pink tr th{
background-color: #f99;
}
table.pink tr td{
background-color: #fee;
}
table.pink tr.alt td{
background-color: #fdd;
}
table.pink tr.selected td{
background-color: #fcd;
}
table.pink tr:hover td{
background: #fbb;
}
table.pink tr.selected:hover td{
background:#ebc;
}
table.pink tr th.selectedUp{
background-color: #f99;
}
table.pink tr th.selectedDown{
background-color: #f99;
}
table.violet{
border: 1px solid #81218a;
}
table.violet tr th,
table.violet tr td{
border: 1px dotted #81218a;
}
table.violet tr th{
background-color: #81218a;
color: #fff;
}
table.violet tr td{
background-color: #f7f8f9;
}
table.violet tr.alt td{
background-color: #e8f1f7;
}
table.violet tr:hover td{
background-color: #c4cae2;
color: #333;
}
<table class="blue">; | My Desire -Mata Amritanandamayi Devi |
|---|
| Everyone in the world should be able to sleep without fear, at least for one night. |
| Everyone should be able to eat to his fill, at least for one day. |
| There should be at least one day when hospitals see no one admitted due to violence. |
| By doing selfless service for at least one day, everyone should help the poor and needy. |
| It is Amma's prayer that at least this small dream be realised. |
<table class="pink">
| My Desire -Mata Amritanandamayi Devi |
|---|
| Everyone in the world should be able to sleep without fear, at least for one night. |
| Everyone should be able to eat to his fill, at least for one day. |
| There should be at least one day when hospitals see no one admitted due to violence. |
| By doing selfless service for at least one day, everyone should help the poor and needy. |
| It is Amma's prayer that at least this small dream be realised. |
<table class="orange">
| My Desire -Mata Amritanandamayi Devi |
|---|
| Everyone in the world should be able to sleep without fear, at least for one night. |
| Everyone should be able to eat to his fill, at least for one day. |
| There should be at least one day when hospitals see no one admitted due to violence. |
| By doing selfless service for at least one day, everyone should help the poor and needy. |
| It is Amma's prayer that at least this small dream be realised. |
<table class="cyan">
| My Desire -Mata Amritanandamayi Devi |
|---|
| Everyone in the world should be able to sleep without fear, at least for one night. |
| Everyone should be able to eat to his fill, at least for one day. |
| There should be at least one day when hospitals see no one admitted due to violence. |
| By doing selfless service for at least one day, everyone should help the poor and needy. |
| It is Amma's prayer that at least this small dream be realised. |
<table class="green">
| My Desire -Mata Amritanandamayi Devi |
|---|
| Everyone in the world should be able to sleep without fear, at least for one night. |
| Everyone should be able to eat to his fill, at least for one day. |
| There should be at least one day when hospitals see no one admitted due to violence. |
| By doing selfless service for at least one day, everyone should help the poor and needy. |
| It is Amma's prayer that at least this small dream be realised |
table class="aquamarine">
| My Desire -Mata Amritanandamayi Devi |
|---|
| Everyone in the world should be able to sleep without fear, at least for one night. |
| Everyone should be able to eat to his fill, at least for one day. |
| There should be at least one day when hospitals see no one admitted due to violence. |
| By doing selfless service for at least one day, everyone should help the poor and needy. |
| It is Amma's prayer that at least this small dream be realised. |
<table class="olive">
| My Desire -Mata Amritanandamayi Devi |
|---|
| Everyone in the world should be able to sleep without fear, at least for one night. |
| Everyone should be able to eat to his fill, at least for one day. |
| There should be at least one day when hospitals see no one admitted due to violence. |
| By doing selfless service for at least one day, everyone should help the poor and needy. |
| It is Amma's prayer that at least this small dream be realised. |
<table class="nature">
| My Desire -Mata Amritanandamayi Devi |
|---|
| Everyone in the world should be able to sleep without fear, at least for one night. |
| Everyone should be able to eat to his fill, at least for one day. |
| There should be at least one day when hospitals see no one admitted due to violence. |
| By doing selfless service for at least one day, everyone should help the poor and needy. |
| It is Amma's prayer that at least this small dream be realised. |
<table class="cool">
| My Desire -Mata Amritanandamayi Devi |
|---|
| Everyone in the world should be able to sleep without fear, at least for one night. |
| Everyone should be able to eat to his fill, at least for one day. |
| There should be at least one day when hospitals see no one admitted due to violence. |
| By doing selfless service for at least one day, everyone should help the poor and needy. |
| It is Amma's prayer that at least this small dream be realised. |
<;table class="violet">
| My Desire -Mata Amritanandamayi Devi |
|---|
| Everyone in the world should be able to sleep without fear, at least for one night. |
| Everyone should be able to eat to his fill, at least for one day. |
| There should be at least one day when hospitals see no one admitted due to violence. |
| By doing selfless service for at least one day, everyone should help the poor and needy. |
It is Amma's prayer that at least this small dream be realised.
|
technorati tags: Web 2.0, Ajax, Dojo,filteringTable, JavaScript, CSS, filteringTable
1 comments:
People should read this.
Post a Comment