您现在的位置是：网站首页> 编程资料编程资料

仿Word自动套用格式使用CSS设置表格样式实例设置div背景透明的方法示例CSS实现div不设高度完全居中div自适应高度自动填充剩余高度详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法DIV或者DIV里面的图片水平与垂直居中的方法详解如何用div实现自制滚动条div对齐与网页布局详解DIV+CSS实现电台列表设计的示例代码div+css实现带箭头的面包屑导航栏不定宽高的文字在div中垂直居中实现方法

2021-09-07 1852人已围观

简介 Word中设置表格格式，主要是设置边框和底纹，可选定整个表格或者部分单元格右击→表格属性→边框和底纹，打开“边框和底纹”对话框进行设置或察看

找一个虽然不是很好看，但设置起来比较复杂的吧：彩色底纹－强调文字颜色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内容与结构】：

复制代码

代码如下:

Column0	Column1	Column2	Column4	Column5
abc	abc	abc	abc	abc
abc	abc	abc	abc	abc
abc	abc	abc	abc	abc
abc	abc	abc	abc	abc
abc	abc	abc	abc	abc
abc	abc	abc	abc	abc

【样式表】：

复制代码

代码如下:

.table-11
{
width: 100%;
table-layout: auto;
*border-collapse:collapse;/* IE用 */
border-spacing:0;
}
/*标题行*/
.table-11 th
{
}
/*内容所有行*/
.table-11 tbody tr
{
background: #FEF4EC;
}
/*内容所有偶数行（奇数为odd、偶数为even）*/
.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;
}

【效果】：