body,table{ font-size:12px; } table{ table-layout:fixed; empty-cells:show; border-collapse: collapse; margin:0 auto; } td{ height:20px; } h1,h2,h3{ font-size:12px; margin:0; padding:0; } .title { background: #FFF; border: 1px solid #9DB3C5; padding: 1px; width:90%;margin:20px auto; } .title h1 { line-height: 31px; text-align:center; background: #2F589C url(th_bg2.gif); background-repeat: repeat-x; background-position: 0 0; color: #FFF; } .title th, .title td { border: 1px solid #CAD9EA; padding: 5px; } /*这个是借鉴一个论坛的样式*/ table.t1{ border:1px solid #cad9ea; color:#666; } table.t1 th { background-image: url(th_bg1.gif); background-repeat::repeat-x; height:30px; } table.t1 td,table.t1 th{ border:1px solid #cad9ea; padding:0 1em 0; } table.t1 tr.a1{ background-color:#f5fafe; } table.t2{ border:1px solid #9db3c5; color:#666; } table.t2 th { background-image: url(th_bg2.gif); background-repeat::repeat-x; height:30px; color:#fff; } table.t2 td{ border:1px dotted #cad9ea; padding:0 2px 0; } table.t2 th{ border:1px solid #a7d1fd; padding:0 2px 0; } table.t2 tr.a1{ background-color:#e8f3fd; } table.t3{ border:1px solid #fc58a6; color:#720337; } table.t3 th { background-image: url(th_bg3.gif); background-repeat::repeat-x; height:30px; color:#35031b; } table.t3 td{ border:1px dashed #feb8d9; padding:0 1.5em 0; } table.t3 th{ border:1px solid #b9f9dc; padding:0 2px 0; } table.t3 tr.a1{ background-color:#fbd8e8; } --> < script type ="text/javascript" > function ApplyStyle(s){ document.getElementById("mytab").className=s.innerText; } < body > < div class ="title" > < h1 > 大家好，CSS与表格的结合示例 < table >< tr >< td > 点击链接切换样式： < a href ="javascript:;" onclick ="ApplyStyle(this)" > t1 < a href ="javascript:;" onclick ="ApplyStyle(this)" > t2 < a href ="javascript:;" onclick ="ApplyStyle(this)" > t3 < table width ="90%" id ="mytab" border ="1" class ="t1" > < thead > < th width ="10%" > 网名 < th width ="30%" > 博客 < th width ="20%" > 电邮 < th width ="30%" > 网络硬盘 < th width ="10%" > QQ < tr class ="a1" > < td > wallimn < td > http://blog.csdn.net/wallimn < td > wallimn@tom.com < td > http://wallimn.ys168.com < td > 54871876 < tr > < td > 长三江 < td > 村在 < td > 北京天安门 < td > 东四十条 < td > 21345678 < tr class ="a1" > < td > 长三江 < td > 村在 < td > 北京天安门 < td > 东四十条 < td > 21345678 < tr > < td > 长三江 < td > 村在 < td > 北京天安门 < td > 东四十条 < td > 21345678 < tr class ="a1" > < td > wallimn < td > http://blog.csdn.net/wallimn < td > wallimn@tom.com < td > http://wallimn.ys168.com < td > 54871876 < tr > < td > 长三江 < td > 村在 < td > 北京天安门 < td > 东四十条 < td > 21345678 < tr class ="a1" > < td > 长三江 < td > 村在 < td > 北京天安门 < td > 东四十条 < td > 21345678 < tr > < td > 长三江 < td > 村在 < td > 北京天安门 < td > 东四十条 < td > 21345678 ———————————————— 版权声明：本文为CSDN博主「wallimn」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/wallimn/article/details/2212916
