{"id":386,"date":"2021-04-08T19:46:41","date_gmt":"2021-04-08T10:46:41","guid":{"rendered":"http:\/\/genicca.wp.xdomain.jp\/?p=386"},"modified":"2025-02-13T09:19:04","modified_gmt":"2025-02-13T00:19:04","slug":"%e3%81%93%e3%82%8c%e3%81%af%e3%81%99%e3%81%94%e3%81%84%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab","status":"publish","type":"post","link":"https:\/\/genicca.cloudfree.jp\/?p=386","title":{"rendered":"\u3053\u308c\u306f\u3059\u3054\u3044\u30c6\u30fc\u30d6\u30eb"},"content":{"rendered":"<p>\u3059\u3054\u3044\u3002<br \/>\npecopla.net\/web-column\/table-design<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;table&gt;\r\n&lt;thead&gt;\r\n&lt;tr&gt;\r\n&lt;td class=\"non\"&gt;&lt;\/td&gt;\r\n&lt;th scope=\"col\"&gt;\u5185\u5bb9&lt;\/th&gt;\r\n&lt;th scope=\"col\"&gt;\u4fa1\u683c(\u6708\u984d)&lt;\/th&gt;\r\n&lt;\/tr&gt;\r\n&lt;\/thead&gt;\r\n&lt;tbody&gt;\r\n&lt;tr&gt;\r\n&lt;th&gt;\u30d9\u30fc\u30b7\u30c3\u30af\u30d7\u30e9\u30f3&lt;\/th&gt;\r\n&lt;td data-label=\"\u5185\u5bb9\" class=\"txt\"&gt;\u306f\u3058\u3081\u3066\u306e\u65b9\u5411\u3051\u3002\u30d9\u30fc\u30b7\u30c3\u30af\u306a\u304a\u8a66\u3057\u30d7\u30e9\u30f3&lt;\/td&gt;\r\n&lt;td data-label=\"\u4fa1\u683c\" class=\"price\"&gt;\u00a53,000&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;tr&gt;\r\n&lt;th&gt;\u30ab\u30b9\u30bf\u30e0\u30d7\u30e9\u30f3&lt;\/th&gt;\r\n&lt;td data-label=\"\u5185\u5bb9\" class=\"txt\"&gt;\u5fc5\u8981\u306a\u3082\u306e\u3060\u3051\u63c3\u3048\u3089\u308c\u308b\u30ab\u30b9\u30bf\u30e0\u30d7\u30e9\u30f3&lt;\/td&gt;\r\n&lt;td data-label=\"\u4fa1\u683c\"class=\"price\"&gt;\u00a54,000&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;tr&gt;\r\n&lt;th&gt;\u30d7\u30ec\u30df\u30a2\u30e0\u30d7\u30e9\u30f3&lt;\/th&gt;\r\n&lt;td data-label=\"\u5185\u5bb9\" class=\"txt\"&gt;\u5168\u3066\u304a\u307e\u304b\u305b\u306e\u30d7\u30ec\u30df\u30a2\u30e0\u30d7\u30e9\u30f3&lt;\/td&gt;\r\n&lt;td data-label=\"\u4fa1\u683c\"class=\"price\"&gt;\u00a510,000&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;\/tbody&gt;\r\n&lt;\/table&gt;<\/code><\/pre>\n<\/div>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>body {\r\nfont-family: \"Open Sans\", sans-serif;\r\nline-height: 1.25;\r\n}\r\n\r\ntable {\r\nborder-collapse: collapse;\r\nmargin: 0 auto;\r\npadding: 0;\r\nwidth: 650px;\r\ntable-layout: fixed;\r\n}\r\n\r\ntable tr {\r\nbackground-color: #e6f2f5;\r\npadding: .35em;\r\nborder-bottom: 2px solid #fff;\r\n}\r\ntable th,\r\ntable td {\r\npadding: 1em 10px 1em 1em;\r\nborder-right: 2px solid #fff;\r\n}\r\ntable th {\r\nfont-size: .85em;\r\n}\r\ntable thead tr{\r\nbackground-color: #167F92;\r\ncolor:#fff;\r\n}\r\ntable tbody th {\r\nbackground: #78bbc7;\r\ncolor: #fff;\r\n}\r\n.txt{\r\ntext-align: left;\r\nfont-size: .85em;\r\n}\r\n.price{\r\ntext-align: right;\r\ncolor: #167F92;\r\nfont-weight: bold;\r\n}\r\n.non{\r\nbackground:#fff\r\n}\r\n@media screen and (max-width: 600px) {\r\ntable {\r\nborder: 0;\r\nwidth:100%\r\n}\r\ntable th{\r\nbackground-color: #167F92;\r\ndisplay: block;\r\nborder-right: none;\r\n}\r\ntable thead {\r\nborder: none;\r\nclip: rect(0 0 0 0);\r\nheight: 1px;\r\nmargin: -1px;\r\noverflow: hidden;\r\npadding: 0;\r\nposition: absolute;\r\nwidth: 1px;\r\n}\r\ntable tr {\r\ndisplay: block;\r\nmargin-bottom: .625em;\r\n}\r\ntable td {\r\nborder-bottom: 1px solid #bbb;\r\ndisplay: block;\r\nfont-size: .8em;\r\ntext-align: right;\r\nposition: relative;\r\npadding: .625em .625em .625em 4em;\r\nborder-right: none;\r\n}\r\n\r\ntable td::before {\r\ncontent: attr(data-label);\r\nfont-weight: bold;\r\nposition: absolute;\r\nleft: 10px;\r\ncolor: #167F92;\r\n}\r\ntable td:last-child {\r\nborder-bottom: 0;\r\n}\r\ntable tbody th {\r\ncolor: #fff;\r\n}\r\n}<\/code><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u3059\u3054\u3044\u3002 pecopla.net\/web-column\/table-design &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;td class=&#8221;non&#8221;&gt;&lt;\/td&#038; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-386","post","type-post","status-publish","format-standard","hentry","category-html_css"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/posts\/386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=386"}],"version-history":[{"count":4,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/posts\/386\/revisions"}],"predecessor-version":[{"id":523,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/posts\/386\/revisions\/523"}],"wp:attachment":[{"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}