仿Word全自动套用文件格式应用CSS设定报表款式案

2021-01-20 11:26 jianzhan
找1个尽管并不是很漂亮,但设定起来较为繁杂的吧:五颜六色底纹-强调文本色调6
Word中的实际效果如图示:
 
【款式剖析】:
Word中设定报表文件格式,关键是设定边框和底纹,可选定全部报表或一部分模块格右击→报表特性→边框和底纹,开启“边框和底纹”会话框开展设定或查看,简易剖析以下:

1、表头全部模块格
1、上边框:无;
2、左侧框:无;
3、右侧框:无;
4、下边框:色调#4BACC6,3磅,单实线(网页页面中磅不太好设定,用3px替代);

2、內容全部行
底纹色调:#FEF4EC;

3、內容全部单数行
底纹色调:#FBCAA2;

4、內容全部模块格
左侧框:白色,0.5,单实线(网页页面中磅不太好设定,用1px替代);

5、內容最终1行模块格
下边框:色调#B65608,0.5磅,单实线(网页页面中磅不太好设定,用1px替代);

6、內容最终1列全部模块格
下边框:色调#B65608,0.5磅,单实线(网页页面中磅不太好设定,用1px替代);

7、內容第1列全部模块格:
底纹色调: #B65608;
左侧框:色调#B65608,0.5磅,单实线(网页页面中磅不太好设定,用1px替代);
文本色调:白色;

【HTML內容与构造】:

拷贝编码
编码以下:

<div style="width:600px;">
<table class="table⑴1">
<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⑴1
{
width: 100%;
table-layout: auto;
*border-collapse:collapse;/* IE用 */
border-spacing:0;
}
/*题目行*/
.table⑴1 th
{
}
/*內容全部行*/
.table⑴1 tbody tr
{
background: #FEF4EC;
}
/*內容全部偶数行(单数为odd、偶数为even)*/
.table⑴1 tbody tr:nth-child(odd)
{
background: #FBCAA2;
}
/*电脑鼠标悬停的行(不包含表头和表尾)*/
.table⑴1 tbody tr:hover
{
background:#FFFF00;
}
/*全部模块格*/
.table⑴1 th, td
{
}
/*表头全部模块格*/
.table⑴1 thead tr th
{
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid 3px #4BACC6;
}
/*表尾全部模块格*/
.table⑴1 tfoot tr td
{
}
/*內容全部模块格*/
.table⑴1 tbody tr td
{
border-left:solid 1px White;
}
/*內容第1行全部模块格*/
.table⑴1 tbody tr:first-child td
{
/*假如设定情况色,将丧失电脑鼠标悬停实际效果*/
}
/*內容最终1行全部模块格*/
.table⑴1 tbody tr:last-child td
{
/*假如设定情况色,将丧失电脑鼠标悬停实际效果*/
border-bottom:solid 1px #B65608;
}
/*报表第1列全部模块格*/
.table⑴1 th:first-child, td:first-child
{
}
/*报表最终1列全部模块格*/
.table⑴1 th:last-child, td:last-child
{
}
/*內容第1列全部模块格*/
.table⑴1 tbody td:first-child
{
background: #B65608;
border-left:solid 1px #B65608;
color:White;
}
/*內容最终1列全部模块格*/
.table⑴1 tbody td:last-child
{
border-right:solid 1px #B65608;
}

【实际效果】:
 
本文关键是出示1些思路,细节剖析和设定看不到得十分适当,有更好的思路和设定,还望不吝赐教……