i wanted know if there way customer single table without effecting other tables on page or site. found css lot calling table tag along other table elements , effects tables on site. want able effect 1 table only. here css:
table { background: #f5f5f5; border-collapse: separate; box-shadow: inset 0 1px 0 #fff; font-size: 12px; line-height: 24px; margin: 30px auto; text-align: left; width: 800px; } th { background: url(http://jackrugile.com/images/misc/noise-diagonal.png), linear-gradient(#777, #444); border-left: 1px solid #555; border-right: 1px solid #777; border-top: 1px solid #555; border-bottom: 1px solid #333; box-shadow: inset 0 1px 0 #999; color: #fff; font-weight: bold; padding: 10px 15px; position: relative; text-shadow: 0 1px 0 #000; } th:after { background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08)); content: ''; display: block; height: 25%; left: 0; margin: 1px 0 0 0; position: absolute; top: 25%; width: 100%; } th:first-child { border-left: 1px solid #777; box-shadow: inset 1px 1px 0 #999; } th:last-child { box-shadow: inset -1px 1px 0 #999; } td { border-right: 1px solid #fff; border-left: 1px solid #e8e8e8; border-top: 1px solid #fff; border-bottom: 1px solid #e8e8e8; padding: 10px 15px; position: relative; transition: 300ms; } td:first-child { box-shadow: inset 1px 0 0 #fff; } td:last-child { border-right: 1px solid #e8e8e8; box-shadow: inset -1px 0 0 #fff; } tr { background: url(http://jackrugile.com/images/misc/noise-diagonal.png); } tr:nth-child(odd) td { background: #f1f1f1 url(http://jackrugile.com/images/misc/noise-diagonal.png); } tr:last-of-type td { box-shadow: inset 0 -1px 0 #fff; } tr:last-of-type td:first-child { box-shadow: inset 1px -1px 0 #fff; } tr:last-of-type td:last-child { box-shadow: inset -1px -1px 0 #fff; } tbody:hover td { color: transparent; text-shadow: 0 0 3px #aaa; } tbody:hover tr:hover td { color: #444; text-shadow: 0 1px 0 #fff; } here html table:
<table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="48%" height="22" valign="middle">course description / registration</td> <td width="12%" height="22" valign="middle">start date</td> <td width="7%" height="22" valign="middle"> days</td> <td width="20%" height="22" valign="middle">location</td> <td width="13%" height="22" valign="middle">tuition</td> </tr> <tr> <td height="30" valign="middle"><a href="20150729gnj.asp">21st century policing: proactive solutions</a></td> <td height="30" valign="middle">07/29/15</td> <td height="30" valign="middle">01</td> <td height="30" valign="middle">glassboro, nj</td> <td height="30" valign="middle">no cost</td> </tr> <tr> <td height="30" valign="middle">21st century policing: proactive solutions</td> <td height="30" valign="middle">07/30/15</td> <td height="30" valign="middle">01</td> <td height="30" valign="middle">camden, nj</td> <td height="30" valign="middle">no cost</td> </tr> <tr> <td height="30" valign="middle">21st century policing: proactive solutions</td> <td height="30" valign="middle">08/20/15</td> <td height="30" valign="middle">01</td> <td height="30" valign="middle">newark, de</td> <td height="30" valign="middle">no cost</td> </tr> <tr> <td height="30" valign="middle">blue courage: heart & mind of guardian</td> <td height="30" valign="middle">08/24/15</td> <td height="30" valign="middle">02</td> <td height="30" valign="middle">new brunswick, nj</td> <td height="30" valign="middle">$129 / $159</td> </tr> <tr> <td height="30" valign="middle"> </td> <td height="30" valign="middle"> </td> <td height="30" valign="middle"> </td> <td height="30" valign="middle"> </td> <td height="30" valign="middle"> </td> </tr> <tr> <td height="30" valign="middle"> </td> <td height="30" valign="middle"> </td> <td height="30" valign="middle"> </td> <td height="30" valign="middle"> </td> <td height="30" valign="middle"> </td> </tr> </table> is there way convert kind of custom class class="thistabledesign". if that's not possible thinking next step change things table in ss example:
/* called table changed thistabledesign thistabledesign{ background: #f5f5f5; border-collapse: separate; box-shadow: inset 0 1px 0 #fff; font-size: 12px; line-height: 24px; margin: 30px auto; text-align: left; width: 800px; } thanks,
you can set class target table. make sure change css class instead of tables:
table { becomes
.mytableclass { then preface other selectors new class:
th { becomes
.mytableclass th { etc.
Comments
Post a Comment