HTML如何改变表格浮动位置,css控制表格样式css布局浮动及
定位
⼀、制作⼀张商品信息表，内容⾃定，要求⽤到⾏与列的合并
实例
html>
饮料商品信息表
table caption {
font-family:"宋体";
font-size:1.5rem;
font-weight:bolder;
margin-bottom: 15px;
/*设置表格标题⽂字⼤⼩ 加粗与下外边距*/
}
table {
border: 1px solid #444;
/*整体边框⼀个像素且灰⾊*/
box-sizing: border-box;
/*稳定盒⼦*/
box-shadow: 1px 1px 1px #808080;
/*添加阴影 */
border-collapse:collapse;
/*折叠边框线*/
width: 600px;
margin: 20px auto;
/*设置表格宽与外边距*/
}
th , td {
border: 1px solid #444;
/*每个单元格1像素且灰⾊*/
padding:10px 10px;
/*设置每个单元格内边距*/
text-align: center;
/*单元格内⽂本居中*/
}
tbody > tr:nth-of-type(odd) {
background-color:#ededed;
/
*!*⽤结构伪类 添加偶数⾏ 背景浅灰  even奇数* odd偶数/*/
}
tfoot > tr:first-of-type > td:first-of-type{
background:linear-gradient( to right , #ededed , #999);
}
/*⽤结构伪类到tfoot下第⼀⾏第⼀个单元格 进⾏背景线性渐变*/
tfoot > tr:first-of-type > td:nth-of-type(2){
background:linear-gradient( to right , #999 , #ededed);
}
商品编码商品全名基本单位进价售价
1百事可乐听1.602.002可⼝可乐听1.602.003雪碧瓶1.602.004七喜瓶1.702.50进价统计:6.508.50售价统计：运⾏实例 »
点击 "运⾏实例" 按钮查看在线实例
⼆、使⽤
...等标签来制作⼀张课程表
实例
html>
课程表
li {
list-style: none;
}
span > ul {
display: table-row;
}
span > ul >li {
display: table-cell; border: 1px solid black; padding: 10px;
}
.caption {
display: table-caption; text-align: center;
font-size: 1.5rem;
font-family: 宋体;
}
.timetable {
display: table;
box-sizing: border-box;
/*border: 1px solid grey;*/
border-collapse: collapse;
width: 800px;
margin: auto;
}
.thead {
display: table-header-group;
/*显⽰表格标题组*/
text-align: center;
font-weight: bolder;
letter-spacing:5px;
/*设置字间距*/
background:linear-gradient( #ffffff , #ededed ); }css表格样式
.
timetable1{
display: table;
box-sizing: border-box;
border-collapse: collapse;
width: 800px;
margin:auto;
}
.tbody {
display: table-row-group;
text-align: center;
letter-spacing:4px;
}
.tr0{
display: table-row;
}
.td0{
display: table-cell;
}
.timetable2{
display: table;
box-sizing: border-box;
width: 800px;
margin: auto;
}
.tr{
display: table-row;
}
.td{
display: table-cell;
width: 1000px;
height: 30px;
}
.tfoot {
display: table-footer-group;
text-align: center;
letter-spacing: 5px;
font-size: 1.1rem;
background:linear-gradient( #ededed , #ffffff  ); }
课程表
时间/星期
星期⼀
星期⼆
星期三
星期四
星期五
上午
语⽂
数学
⾳乐
体育
⾳乐
8:00-11:30

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。