{"id":211,"date":"2016-11-20T15:33:52","date_gmt":"2016-11-20T07:33:52","guid":{"rendered":"http:\/\/pony.hk\/?p=211"},"modified":"2016-12-11T08:28:20","modified_gmt":"2016-12-11T00:28:20","slug":"%e7%ba%afcss%e5%ae%9e%e7%8e%b0%e8%87%aa%e9%80%82%e5%ba%94%e5%b8%83%e5%b1%80%e8%a1%a8%e6%a0%bc","status":"publish","type":"post","link":"https:\/\/lnmp.ivan.xin\/?p=211","title":{"rendered":"\u7eafCSS\u5b9e\u73b0\u81ea\u9002\u5e94\u5e03\u5c40\u8868\u683c"},"content":{"rendered":"

\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n

\n<!DOCTYPE html>
\n<html>
\n<head>
\n<meta charset=\"gb2312\">
\n<title>\u6f14\u793a\uff1a\u7eafCSS\u5b9e\u73b0\u81ea\u9002\u5e94\u5e03\u5c40\u8868\u683c<\/title>
\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1\" \/>
\n<style type=\"text\/css\">
\nbody {
\nfont-family: arial;
\n}<\/p>\n

table {
\nwidth: 80%;
\nmargin:0;
\npadding:0;
\nborder-collapse: collapse;
\nborder-spacing: 0;
\nmargin: 0 auto;
\n}<\/p>\n

table tr {
\npadding: 0px;
\n}<\/p>\n

table th, table td {
\npadding: 10px;
\ntext-align: center;
\nborder: 1px solid #ddd;
\n}<\/p>\n

table th {
\ntext-transform: uppercase;
\nfont-size: 14px;
\nletter-spacing: 1px;
\n}<\/p>\n

@media screen and (max-width: 600px) {<\/p>\n

table {
\nborder: 0;
\n}<\/p>\n

table thead {
\ndisplay: none;
\n}<\/p>\n

table tr {
\nmargin-bottom: 10px;
\ndisplay: block;
\nborder-bottom: 2px solid #ddd;
\n}<\/p>\n

table td {
\ndisplay: block;
\ntext-align: right;
\nfont-size: 13px;
\nborder-bottom: 1px dotted #ccc;
\n}<\/p>\n

table td:last-child {
\nborder-bottom: 0;
\n}<\/p>\n

table td:before {
\ncontent: attr(data-label);
\nfloat: left;
\ntext-transform: uppercase;
\nfont-weight: bold;
\n}
\n}<\/p>\n

.note{max-width: 80%; margin: 0 auto;}
\n<\/style><\/p>\n

<\/head>
\n<body><\/p>\n

<div class=\"note\">
\n<h1>\u6f14\u793a\uff1a\u7eafCSS\u5b9e\u73b0\u81ea\u9002\u5e94\u5e03\u5c40\u8868\u683c<\/h1><\/p>\n

<p>\u8c03\u6574\u9875\u9762\u5bbd\u5ea6\uff0c\u6216\u8005\u5728\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8\u7684\u8bbe\u5907\u4e0a(PC\uff0c\u624b\u673a)\u5c1d\u8bd5\u6d4f\u89c8\u5668\u672c\u9875\uff0c\u4f60\u4f1a\u53d1\u73b0\u4e0b\u9762\u7684\u8868\u683c\u5448\u73b0\u51fa\u81ea\u9002\u5e94\u5e03\u5c40\u7279\u5f81\uff0c\u80fd\u591f\u81ea\u52a8\u7684\u4f7f\u7528\u4e0d\u540c\u7684\u5c4f\u5e55\u5c3a\u5bf8\uff0c\u6570\u636e\u7684\u8868\u73b0\u4e0d\u4f1a\u56e0\u4e3a\u5c4f\u5e55\u5927\u5c0f\u53d8\u5316\u800c\u53d8\u5f97\u4e0d\u5408\u9002\u3002<\/p><\/p>\n

<p>\u8fd9\u79cd\u7528\u7eafCSS\u5b9e\u73b0\u81ea\u9002\u5e94\u5e03\u5c40\u8868\u683c\u7684\u5b9e\u73b0\u6280\u672f\u7ec6\u8282\u8bf7\u53c2\u8003\u6587\u7ae0\u300a<a href=\"http:\/\/www.webhek.com\/responsive-tables-in-pure-css\">\u7eafCSS\u5b9e\u73b0\u81ea\u9002\u5e94\u5e03\u5c40\u8868\u683c<\/a>\u300b<\/p><\/p>\n

<\/div><\/p>\n

<table>
\n<thead>
\n<tr>
\n<th>\u652f\u4ed8<\/th>
\n<th>\u65e5\u671f<\/th>
\n<th>\u91d1\u989d<\/th>
\n<th>\u5468\u671f<\/th>
\n<\/tr>
\n<\/thead>
\n<tbody>
\n<tr>
\n<td data-label=\"\u652f\u4ed8\">\u652f\u4ed8 #1<\/td>
\n<td data-label=\"\u65e5\u671f\">02\/01\/2015<\/td>
\n<td data-label=\"\u91d1\u989d\">\uffe52,311<\/td>
\n<td data-label=\"\u5468\u671f\">01\/01\/2015 - 01\/31\/2015<\/td>
\n<\/tr>
\n<tr>
\n<td data-label=\"\u652f\u4ed8\">\u652f\u4ed8 #2<\/td>
\n<td data-label=\"\u65e5\u671f\">03\/01\/2015<\/td>
\n<td data-label=\"\u91d1\u989d\">\uffe53,211<\/td>
\n<td data-label=\"\u5468\u671f\">02\/01\/2015 - 02\/28\/2015<\/td>
\n<\/tr>
\n<\/tbody>
\n<\/table><\/p>\n

<\/body>
\n<\/html><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

\u4ee3\u7801\u5982\u4e0b\uff1a <!DOCTYPE html> <html> <head> &...<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28323],"tags":[],"class_list":["post-211","post","type-post","status-publish","format-standard","hentry","category-html-css-js"],"_links":{"self":[{"href":"https:\/\/lnmp.ivan.xin\/index.php?rest_route=\/wp\/v2\/posts\/211","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lnmp.ivan.xin\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lnmp.ivan.xin\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lnmp.ivan.xin\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/lnmp.ivan.xin\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=211"}],"version-history":[{"count":0,"href":"https:\/\/lnmp.ivan.xin\/index.php?rest_route=\/wp\/v2\/posts\/211\/revisions"}],"wp:attachment":[{"href":"https:\/\/lnmp.ivan.xin\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lnmp.ivan.xin\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lnmp.ivan.xin\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}