css让表格由例变成行,CSS+DIV模拟Table表格实现行与列合并，盒模型绝对定位与相对定位，圣杯布局---PHP第九期线上班...

实例

/* 设置表格属性 */

table{

box-sizing: border-box;

box-shadow: 1px 1px 1px #999999;

/* 设置边框合并 */

border-collapse: collapse;;

}

/* 设置表格的宽度与文字排版 */

table{

width: 700px;

margin: 20px auto;

}

/* 给每一个表格设置边框 */

th , td{

border: 1px solid gray;

}

/* 设置表格的标题 */

table caption{

font-size: 1.3rem;

margin-bottom: 15px;

}

/* 设置单元格样式 */

td,th{

text-align: center;

padding: 10px;

}

/* 隔行变色 */

tbody tr:nth-of-type(odd){

background-color: hotpink;

}

tbody tr:nth-of-type(even){

background-color: khaki;

}

tbody tr:nth-of-type(1)>td:last-of-type{

background-color: white;

}

th{

background: linear-gradient(green,white);

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

2.实现效果

二、使用

• ...等标签来制作一张课程表

1.代码实现

html代码

实例

第九期课程安排