使用 CSS 3 操作数据内容样式 -cyy
2020-12-24 07:28
标签：操作 隐藏 用户 定义 padding lazy :hover color 用户名 使用css定制表格： 表格标题与对齐处理： 表格颜色与背景定义： 细线表格与间距与空白单元格处理： 可以看到尽管使用了empty-cells，但是空单元格依旧存在； 这是因为只有是 border-collapse:separate; 边框样式才能设置隐藏； 修改之后的效果： 可以看到空白单元格的边框没有了，但是位置仍旧存在； 细线无边框表格样式： 数据表格设计：.table{
display:table; /*相当于table*/
section{
&:nth-of-type(1){
display:table-header-group; /*相当于thead*/
background:#555;
color:#fff;
}
&:nth-of-type(2){
display:table-row-group; /*相当于tbody*/
}
&:nth-of-type(3){
display: table-footer-group; /*相当于tfoot*/
background:#f3f3f3;
}
ul{
display:table-row; /*相当于tr*/
li{
display:table-cell; /*相当于td*/
border:1px solid #ddd;
padding:3px;
}
}
}
}
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
meta name="keywords" content="关键词1，关键词2，关键词3">
meta name="description" content="网站描述bla bla">
title>网站标题title>
link rel="stylesheet" href="style.css">
style>
*{
margin:0;
padding:0;
}
body{
padding:10px;
}
table caption{
background:pink;
/* 表格标题的位置，默认在上面 */
caption-side:bottom;
caption-side:top;
}
table{
width:50%;
}
table tr td{
text-align:center;
vertical-align: middle;
}
style>
head>
body>
article class="table">
nav>表格标题nav>
section>
ul>
li>编号li>
li>标题li>
ul>
section>
section>
ul>
li>1li>
li>cyy1li>
ul>
section>
section>
ul>
li>2li>
li>cyy2li>
ul>
section>
article>
hr>
table border="1">
caption>表格标题caption>
thead>
tr>
td>编号td>
td>标题td>
tr>
thead>
tbody>
tr>
td>1td>
td>cyy1td>
tr>
tbody>
tfoot>
tr>
td>2td>
td>cyy2td>
tr>
tfoot>
table>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
meta name="keywords" content="关键词1，关键词2，关键词3">
meta name="description" content="网站描述bla bla">
title>网站标题title>
link rel="stylesheet" href="style.css">
style>
*{
margin:0;
padding:0;
}
body{
padding:10px;
}
table{
background:pink;
width:300px;
}
/* table tbody tr{
background:pink;
}
table tr td{
background:lightblue;
} */
/* 隔行变色效果： */
table tbody tr:nth-child(odd){
background:lightblue;
}
/* 表格设置背景图片 */
table{
background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604764182871&di=81abc90dfe28552a8ed02579c4ec45ce&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F15%2F20200715071202_ofuwl.thumb.400_0.jpeg);
background-size:cover;
}
style>
head>
body>
article class="table">
nav>表格标题nav>
section>
ul>
li>编号li>
li>标题li>
ul>
section>
section>
ul>
li>1li>
li>cyy1li>
ul>
section>
section>
ul>
li>2li>
li>cyy2li>
ul>
section>
article>
hr>
table border="1">
caption>表格标题caption>
thead>
tr>
td>编号td>
td>标题td>
tr>
thead>
tbody>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tbody>
tfoot>
tr>
td>2td>
td>cyy2td>
tr>
tfoot>
table>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
meta name="keywords" content="关键词1，关键词2，关键词3">
meta name="description" content="网站描述bla bla">
title>网站标题title>
link rel="stylesheet" href="style.css">
style>
*{
margin:0;
padding:0;
}
body{
padding:10px;
}
table{
background:pink;
width:300px;
/* 细线表格 */
/* border-spacing:5px; */
border-collapse:collapse;
/* 空单元格的处理 */
empty-cells:hide;
}
table,td{
border:1px solid #ddd;
}
table tr td{
padding:10px;
}
style>
head>
body>
article class="table">
nav>表格标题nav>
section>
ul>
li>编号li>
li>标题li>
ul>
section>
section>
ul>
li>1li>
li>cyy1li>
ul>
section>
section>
ul>
li>2li>
li>cyy2li>
ul>
section>
article>
hr>
table border="1">
caption>表格标题caption>
thead>
tr>
td>编号td>
td>标题td>
tr>
thead>
tbody>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>td>
td>td>
tr>
tr>
td>td>
td>td>
tr>
tbody>
tfoot>
tr>
td>2td>
td>cyy2td>
tr>
tr>
td>td>
td>td>
tr>
tr>
td>td>
td>td>
tr>
tfoot>
table>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
meta name="keywords" content="关键词1，关键词2，关键词3">
meta name="description" content="网站描述bla bla">
title>网站标题title>
link rel="stylesheet" href="style.css">
style>
*{
margin:0;
padding:0;
}
body{
padding:10px;
}
table{
background:pink;
width:300px;
/* 细线表格 */
/* border-spacing:5px; */
border-collapse:separate;
/* 空单元格的处理 */
empty-cells:hide;
}
table,td{
border:1px solid #ddd;
}
table tr td{
padding:10px;
}
style>
head>
body>
article class="table">
nav>表格标题nav>
section>
ul>
li>编号li>
li>标题li>
ul>
section>
section>
ul>
li>1li>
li>cyy1li>
ul>
section>
section>
ul>
li>2li>
li>cyy2li>
ul>
section>
article>
hr>
table border="1">
caption>表格标题caption>
thead>
tr>
td>编号td>
td>标题td>
tr>
thead>
tbody>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>td>
td>td>
tr>
tr>
td>td>
td>td>
tr>
tbody>
tfoot>
tr>
td>2td>
td>cyy2td>
tr>
tr>
td>td>
td>td>
tr>
tr>
td>td>
td>td>
tr>
tfoot>
table>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
meta name="keywords" content="关键词1，关键词2，关键词3">
meta name="description" content="网站描述bla bla">
title>网站标题title>
link rel="stylesheet" href="style.css">
style>
*{
margin:0;
padding:0;
}
body{
padding:10px;
}
table{
width:300px;
border:none;
border-collapse:collapse;
}
td{
border:none;
border-right:1px solid #ddd;
border-top:1px solid #ddd;
padding:10px;
}
table td:last-child{
border-right:none;
}
table tr:last-child td{
border-bottom:1px solid #ddd;
}
table thead{
background:#f3f3f3;
}
style>
head>
body>
table border="1">
caption>表格标题caption>
thead>
tr>
td>编号td>
td>标题td>
tr>
thead>
tbody>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tr>
td>1td>
td>cyy1td>
tr>
tbody>
tfoot>
tr>
td>2td>
td>cyy2td>
tr>
tfoot>
table>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport"
文章标题：使用 CSS 3 操作数据内容样式 -cyy
文章链接：http://soscw.com/index.php/essay/37871.html