css自适合表格，适用用数据展示

2020-10-05 网页编程网 网页编程网

前二种基于table实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style type="text/css">
			table.responsive{
				width:98%;
				margin: 0 auto;
				color: #000;
				border-collapse: collapse;
				border: 1px solid #666666;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
			}
			table.responsive td,table.responsive th{
				border: 1px solid #666666;
				padding: .5em 1em;
			}
			table.responsive th {
			    background: #35B558;
			    height: 24px;
			    line-height: 24px;
			}
			@media (max-width:480px){
				table.responsive thead {
			    	display: none;
				}
				table.responsive tr, table.responsive td {
			        display: block;
			    }
			    table.responsive td{
			        padding-left: 25%;
			    }
				table.responsive td:nth-child(1)::before {
			        content:'姓名';
			        position: absolute;
			        left: .5em;
			        font-weight: bold;
			    }
			    table.responsive td:nth-child(2)::before {
			        content:'邮箱';
			        position: absolute;
			        left: .5em;
			        font-weight: bold;
			    }
				table.responsive td:nth-child(3)::before {
				    content:'年龄';
				    position: absolute;
				    left: .5em;
				    font-weight: bold;
				}
				table.responsive td:nth-child(4)::before {
				    content:'公司';
				    position: absolute;
				    left: .5em;
				    font-weight: bold;
				}
				table.responsive td:nth-child(5)::before {
				    content:'地址';
				    position: absolute;
				    left: .5em;
				    font-weight: bold;
				}
			    table.responsive tr {
			        position: relative;
			        margin-bottom: 1em;
			        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
			    }
			  
			}
 
		</style>
		<title>DIV+CSS实现自适应表格布局</title>
	</head>
	<body>
		<table class="responsive">
			<thead>
				<tr>
					<th>姓名</th>
					<th>邮箱</th>
					<th>年龄</th>
					<th>公司</th>
					<th>地址</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="name">albert</td>
					<td class="email">albert@163.com</td>
					<td class="age">13</td>
					<td class="company">XX科技网络有限公司</td>
					<td class="addres">中国河南</td>
				</tr>
				<tr>
					<td class="name">albert</td>
					<td class="email">albert@163.com</td>
					<td class="age">13</td>
					<td class="company">XX科技网络有限公司</td>
					<td class="addres">中国河南</td>
				</tr>
				<tr>
					<td class="name">albert</td>
					<td class="email">albert@163.com</td>
					<td class="age">13</td>
					<td class="company">XX科技网络有限公司</td>
					<td class="addres">中国河南</td>
				</tr>
				<tr>
					<td class="name">albert</td>
					<td class="email">albert@163.com</td>
					<td class="age">13</td>
					<td class="company">XX科技网络有限公司</td>
					<td class="addres">中国河南</td>
				</tr>
				<tr>
					<td class="name">albert</td>
					<td class="email">albert@163.com</td>
					<td class="age">13</td>
					<td class="company">XX科技网络有限公司</td>
					<td class="addres">中国河南</td>
				</tr>
			</tbody>
		</table>
 
	</body>
</html>

实现2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>演示：CSS3制作响应式表格</title>
        <style>
            * { 
                margin: 0; 
                padding: 0; 
            }
            body { 
                font: 14px/1.4 "Microsoft Yahei", Tahoma,Georgia, Serif; 
            }
            #page-wrap {
                margin: 10px;
            }
            p {
                margin: 20px 0; 
            }

/* 
            Generic Styling, for Desktops/Laptops 
            */
            table { 
                width: 100%; 
                border-collapse: collapse; background:#fff
            }
            /* Zebra striping */
            tr:nth-of-type(odd) { 
                background: #eee; 
            }
            th { 
                background: #333; 
                color: white; 
                font-weight: bold; 
            }
            td, th { 
                padding: 6px; 
                border: 1px solid #ccc; 
                text-align: left; 
            }
            @media 
            only screen and (max-width: 760px),
            (min-device-width: 768px) and (max-device-width: 1024px)  {

/* Force table to not be like tables anymore */
                table, thead, tbody, th, td, tr { 
                    display: block; 
                }

/* Hide table headers (but not display: none;, for accessibility) */
                thead tr { 
                    position: absolute;
                    top: -9999px;
                    left: -9999px;
                }

tr { border: 1px solid #ccc; }

td { 
                    /* Behave  like a "row" */
                    border: none;
                    border-bottom: 1px solid #eee; 
                    position: relative;
                    padding-left: 50%; 
                }

td:before { 
                    /* Now like a table header */
                    position: absolute;
                    /* Top/left values mimic padding */
                    top: 6px;
                    left: 6px;
                    width: 45%; 
                    padding-right: 10px; 
                    white-space: nowrap;
                }

/*
                Label the data
                */
                td:nth-of-type(1):before { content: "姓名"; }
                td:nth-of-type(2):before { content: "性别"; }
                td:nth-of-type(3):before { content: "出生年月"; }
                td:nth-of-type(4):before { content: "班级"; }
                td:nth-of-type(5):before { content: "语文"; }
                td:nth-of-type(6):before { content: "数学"; }
                td:nth-of-type(7):before { content: "外语"; }
                td:nth-of-type(8):before { content: "综合"; }
                td:nth-of-type(9):before { content: "总分"; }
                td:nth-of-type(10):before { content: "名次"; }
            }

/* Smartphones (portrait and landscape) ----------- */
            @media only screen
            and (min-device-width : 320px)
            and (max-device-width : 480px) {
                body { 
                    padding: 0; 
                    margin: 0;  }
            }

/* iPads (portrait and landscape) ----------- */
            @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
                body { 
                    width: 100%; 
                }
            }

</style>
        
    </head>
    <body>
        <div id="page-wrap"style="margin:50px 0 0">
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>出生年月</th>
                        <th>班级</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th>外语</th>
                        <th>综合</th>
                        <th>总分</th>
                        <th>名次</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>蒋介</td>
                        <td>男</td>
                        <td>1998.2.5</td>
                        <td>H123</td>
                        <td>98</td>
                        <td>126</td>
                        <td>92</td>
                        <td>215</td>
                        <td>531</td>
                        <td>156</td>
                    </tr>
                    <tr>
                        <td>许维</td>
                        <td>女</td>
                        <td>1998.2.1</td>
                        <td>H128</td>
                        <td>133</td>
                        <td>120</td>
                        <td>109</td>
                        <td>236</td>
                        <td>598</td>
                        <td>26</td>
                    </tr>
                    <tr>
                        <td>汪函新</td>
                        <td>男</td>
                        <td>1998.12.23</td>
                        <td>H223</td>
                        <td>103</td>
                        <td>110</td>
                        <td>105</td>
                        <td>245</td>
                        <td>563</td>
                        <td>66</td>
                    </tr>
                    <tr>
                        <td>李广</td>
                        <td>男</td>
                        <td>1997.6.5</td>
                        <td>H122</td>
                        <td>112</td>
                        <td>85</td>
                        <td>130</td>
                        <td>210</td>
                        <td>539</td>
                        <td>112</td>
                    </tr>
                    <tr>
                        <td>赵少国</td>
                        <td>男</td>
                        <td>1999.1.5</td>
                        <td>H125</td>
                        <td>99</td>
                        <td>102</td>
                        <td>96</td>
                        <td>202</td>
                        <td>499</td>
                        <td>1025</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</HTML>

实现3

<html><head>
		<meta charset="utf-8">
		 <meta name="viewport" content="width=device-width, initial-scale=1">
		<style type="text/css">
			.customer-page {
				background: #FFFFFF;
				box-shadow: 0 2px 4px 0 rgba(147, 157, 165, 0.48);
				text-align: center;
			}
 
			.customer-page-table {
				display: table;
				width: 100%;
			}
 
			.table-row {
				display: table-row;
			}
 
			.item-content {
				display: table-cell;
			}
 
			.table-row.header .item-content {
				font-weight: 600;
				color: #707485;
			}
 
			.table-row:not(:last-child) .item-content {
				border-bottom: 1px solid #979797;
			}
 
			.table-row .item-content {
				height: 60px;
				text-align: left;
				line-height: 60px;
			}
 
			@media screen and (max-width: 500px) {
 
				.customer-page-tabl {
					display: inline;
				}
 
				.table-row {
					border: 1px solid #ddd;
					margin-bottom: 10px;
					display: block;
					border-bottom: 2px solid #ddd;
				}
 
				.table-row.header {
					display: none;
				}
 
				.table-row .item-content {
					display: block;
					text-align: right;
					font-size: 13px;
					border-bottom: 1px dotted #ccc;
					height: 50px;
					line-height: 50px;
					padding: 0 10px;
				}
 
				.table-row .item-content:last-child {
					border-bottom: 0;
				}
 
				.table-row .item-content:before {
					content: attr(data-label);
					float: left;
					text-transform: uppercase;
					font-weight: bold;
				}
			}
		</style>
		<title>DIV+CSS实现自适应表格布局</title>
	</head>
	<body>
		<div class="customer-page">
 
			<div class="customer-page-table">
				<div class="table-row header">
					<div class="item-content">姓名</div>
					<div class="item-content">邮箱</div>
					<div class="item-content">年龄</div>
					<div class="item-content">公司</div>
					<div class="item-content">地址</div>
				</div>
				<div class="table-row body-row" data-id="13">
					<div data-label="年龄" class="item-content">13</div>
					<div data-label="邮箱" class="item-content">albert@163.com</div>
					<div data-label="姓名" class="item-content">sitebuilder</div>
					<div data-label="公司" class="item-content">Dec 31, 1969 3:59pm</div>
					<div data-label="地址" class="item-content">$6660.00</div>
				</div>
				<div class="table-row body-row" data-id="13">
					<div data-label="年龄" class="item-content">13</div>
					<div data-label="邮箱" class="item-content">albert@163.com</div>
					<div data-label="姓名" class="item-content">sitebuilder</div>
					<div data-label="公司" class="item-content">Dec 31, 1969 3:59pm</div>
					<div data-label="地址" class="item-content">$6660.00</div>
				</div>
				<div class="table-row body-row" data-id="13">
					<div data-label="年龄" class="item-content">13</div>
					<div data-label="邮箱" class="item-content">albert@163.com</div>
					<div data-label="姓名" class="item-content">sitebuilder</div>
					<div data-label="公司" class="item-content">Dec 31, 1969 3:59pm</div>
					<div data-label="地址" class="item-content">$6660.00</div>
				</div>
				<div class="table-row body-row" data-id="13">
					<div data-label="年龄" class="item-content">13</div>
					<div data-label="邮箱" class="item-content">albert@163.com</div>
					<div data-label="姓名" class="item-content">sitebuilder</div>
					<div data-label="公司" class="item-content">Dec 31, 1969 3:59pm</div>
					<div data-label="地址" class="item-content">$6660.00</div>
				</div>
			</div>
		</div>
</body></html>

阅读原文

阅读 3172

123 显示电脑版