今天小编跟大家讲解下有关仿Word自动套用格式使用CSS设置表格样式实例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关仿Word自动套用格式使用CSS设置表格样式实例 的相关资料，希望小伙伴们看了有所帮助。
找一个虽然不是很好看 但设置起来比较复杂的吧：彩色底纹－强调文字颜色6 Word中的效果如图示： 【样式分析】： Word中设置表格格式 主要是设置边框和底纹 可选定整个表格或者部分单元格右击→表格属性→边框和底纹 打开“边框和底纹”对话框进行设置或察看 简单分析如下： 一、表头所有单元格 1、上边框：无； 2、左边框：无； 3、右边框：无； 4、下边框：颜色#4BACC6 3磅 单实线（网页中磅不好设置 用3px取代）; 二、内容所有行 底纹颜色：#FEF4EC; 三、内容所有奇数行 底纹颜色：#FBCAA2; 四、内容所有单元格 左边框：白色 0.5 单实线（网页中磅不好设置 用1px取代）； 五、内容最后一行单元格 下边框：颜色#B65608 0.5磅 单实线（网页中磅不好设置 用1px取代）； 六、内容最后一列所有单元格 下边框：颜色#B65608 0.5磅 单实线（网页中磅不好设置 用1px取代）； 七、内容第一列所有单元格： 底纹颜色： #B65608； 左边框：颜色#B65608 0.5磅 单实线（网页中磅不好设置 用1px取代）； 文字颜色：白色； 【HTML内容与结构】： 复制代码代码如下: <div style="width:600px;"> <table class="table-11"> <thead> <tr> <th>Column0</th><th>Column1</th><th>Column2</th><th>Column4</th><th>Column5</th> </tr> </thead> <tbody> <tr> <td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td> </tr> <tr> <td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td> </tr> <tr> <td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td> </tr> <tr> <td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td> </tr> <tr> <td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td> </tr> <tr> <td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td> </tr> </tbody> </table> </div> 【样式表】： 复制代码代码如下: .table-11 { width: 100%; table-layout: auto; *border-collapse:collapse; border-spacing:0; } .table-11 th { } .table-11 tbody tr { background: #FEF4EC; } .table-11 tbody tr:nth-child(odd) { background: #FBCAA2; } .table-11 tbody tr:hover { background:#FFFF00; } .table-11 th, td { } .table-11 thead tr th { border-top: none; border-left: none; border-right: none; border-bottom: solid 3px #4BACC6; } .table-11 tfoot tr td { } .table-11 tbody tr td { border-left:solid 1px White; } .table-11 tbody tr:first-child td { } .table-11 tbody tr:last-child td { border-bottom:solid 1px #B65608; } .table-11 th:first-child, td:first-child { } .table-11 th:last-child, td:last-child { } .table-11 tbody td:first-child { background: #B65608; border-left:solid 1px #B65608; color:White; } .table-11 tbody td:last-child { border-right:solid 1px #B65608; } 【效果】： 本文主要是提供一些思路 细节分析和设置不见得非常恰当 有更好的思路和设置 还望不吝赐教……来源：爱蒂网
