[RESOLVED]css for specific tables

Hi

I am using the below tutorial to design some of tables that i have it in my application, some of pages has many of tables, So how i can give the css design for specific tables only. In the tutorial he write the css in the same page but i have create a
separated css file called: "table.css".

http://johnsardine.com/example/simple-little-table/

1. Include the css inside the head HTML tag; in the pages you want to use, as shown below

<head>
<link rel="stylesheet" type="text/css" href="table.css"> <!-- You may want to use the relative path in href property according to the folder structure -->
</head>

2. Assign the css class to the table you wish to apply the styles, as shown below

<table class="YourclassName" ......>

Hi i think there is no need to make extra css file for it you can do it by including css property in same file

by below css you can design table in to specific design

just put below css in to your css file and put class (  gridtable ) on the table on which you need that design..

.gridtable {
    background: none repeat scroll 0 0 #eaebec;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 2px #d1d1d1;
    color: #666;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    margin: 20px;
    text-shadow: 1px 1px 0 #fff;
}
.gridtable th {
    background: -moz-linear-gradient(center top , #ededed, #ebebeb) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #fafafa;
    padding: 21px 25px 22px;
}
.gridtable th:first-child {
    padding-left: 20px;
    text-align: left;
}
.gridtable tr:first-child th:first-child {
    border-top-left-radius: 3px;
}
.gridtable tr:first-child th:last-child {
    border-top-right-radius: 3px;
}
.gridtable tr {
    padding-left: 20px;
    text-align: center;
}
.gridtable td:first-child {
    border-left: 0 none;
    padding-left: 20px;
    text-align: left;
}
.gridtable td {
    background: -moz-linear-gradient(center top , #fbfbfb, #fafafa) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    border-top: 1px solid #ffffff;
    padding: 18px;
}
.gridtable tr.even td {
    background: -moz-linear-gradient(center top , #f8f8f8, #f6f6f6) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.gridtable tr:last-child td {
    border-bottom: 0 none;
}
.gridtable tr:last-child td:first-child {
    border-bottom-left-radius: 3px;
}
.gridtable tr:last-child td:last-child {
    border-bottom-right-radius: 3px;
}
.gridtable tr:hover td {
    background: -moz-linear-gradient(center top , #f2f2f2, #f0f0f0) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

Hope this will help you.

Leave a Reply