Moving table inline-css out of HTML part -

Moving table inline-css out of HTML part -

i wondering if there's way somehow transfer inline-css on table css file ? guess require identify each <td> seperately, how can done? (maybe it's possible utilize <td1> <td2> etc.?

http://jsfiddle.net/ndyhl/1/

html:

<div class="main"> <table class="tablebot"> <thead> <tr> <th width="507" style="text-align:left">topic</th> <th width="77" style="text-align:center">responses</th> <th width="0" style="text-align:center; ">last message</th> </tr> </thead> <tbody> <tr> <td width="507" style="text-align:left; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;">foofffffffftetadfgdfgdfgdfgstafgstfooffffffghfghfghfghfghfftetastastfoofffffffffffftetastast</td> <td width="77" style="text-align:center">329</td> <td width="100" style="text-align:center">jonas</td> <td width="110" style="text-align:center">19-03-2014 13:37</td> </tr> <tr> <td width="507" style="text-align:left">bar</td> <td width="77" style="text-align:center">16</td> <td width="100" style="text-align:center">untanas</td> <td width="110" style="text-align:center">19-03-2014 13:37</td> </tr> <tr> <td width="507" style="text-align:left">foo</td> <td width="77" style="text-align:center">28</td> <td width="100" style="text-align:center">petras</td> <td width="110" style="text-align:center">19-03-2014 13:37</td> </tr> <tr> <td width="507" style="text-align:left">bar</td> <td width="77" style="text-align:center">324</td> <td width="100" style="text-align:center">untanas</td> <td width="110" style="text-align:center">19-03-2014 13:37</td> </tr> <tr> <td width="507" style="text-align:left">bar</td> <td width="77" style="text-align:center">111</td> <td width="100" style="text-align:center">jonas</td> <td width="110" style="text-align:center">19-03-2014 13:37</td> </tr> <tr> <td width="507" style="text-align:left">bar</td> <td width="77" style="text-align:center">546</td> <td width="100" style="text-align:center">untanas</td> <td width="110" style="text-align:center">19-03-2014 13:37</td> </tr> <tr> <td width="507" style="text-align:left">bar</td> <td width="77" style="text-align:center">1</td> <td width="100" style="text-align:center">jonas</td> <td width="110" style="text-align:center">19-03-2014 13:37</td> </tr> <tr> <td width="507" style="text-align:left">bar</td> <td width="77" style="text-align:center">97</td> <td width="100" style="text-align:center">petras</td> <td width="110" style="text-align:center">19-03-2014 13:37</td> </tr> </tbody> </table> </div>

css:

.main{ margin:0 auto; width:1150px; font-size:16; } .content{ } .tablebot{ table-layout:fixed; border-collapse:collapse; font-size:14px; width:795px; } .tablebot th{ background:rgb(229,229,229); color:#555555; } .tablebot td{ border:1px solid rgb(229,229,229); } .tablebot tbody tr:nth-child(even){ background-color:rgb(229,229,229); } .tablebot tbody{ color:#555555; }

firstly, can give lastly th colspan, can't css.

addtionally, moving syling css realy easy.

you can utilize td:first-child , td:nth-child() pseudo selectors this

table tr td:firstchild{width: 507px; text-align: left;} table tr td:nth-child(2){ width: 77px; text-align:center;}

and go there

html css table format inline