{"id":296,"date":"2005-12-29T13:11:46","date_gmt":"2005-12-29T05:11:46","guid":{"rendered":"http:\/\/j178.mtgbb.com\/26"},"modified":"2005-12-29T13:11:46","modified_gmt":"2005-12-29T05:11:46","slug":"css%e5%9b%ba%e5%ae%9a%e8%a1%a8%e9%a0%ad%e7%9a%84html%e8%a1%a8%e6%a0%bc","status":"publish","type":"post","link":"https:\/\/j178.mtgbb.com\/?p=296","title":{"rendered":"CSS\u56fa\u5b9a\u8868\u982d\u7684HTML\u8868\u683c"},"content":{"rendered":"

\u8cc7\u6599\u4f86\u6e90\uff1aCSDN\u6280\u8853\u4e2d\u5fc3<\/a>\u3001superhasty \u7684 Blog <\/a><\/p>\n

\u7d93\u5728\u9805\u76ee\u4e2d\u5be6\u73fe\u904e\u4e00\u500b\u56fa\u5b9a\u8868\u982d\u7684HTML\u8868\u683c\uff0c\u4f46\u4f7f\u7528\u4e86\u975e\u5e38\u81c3\u816b\u7684\u4ee3\u78bc\uff0c\u56e0\u70ba\u5be6\u969b\u4e0a\u662f\u756b\u4e86\u4e09\u500b\u4e00\u6a23\u7684\u8868\u683c\u3002\u5076\u7136\u7684\u6a5f\u6703\uff0c\u767c\u73fe\u4e86\u4e00\u500b\u7d14\u7cb9\u7528HTML\u548cCSS\u5be6\u73fe\u7684\u56fa\u5b9a\u8868\u982d\u7684\u8868\u683c\u3002\u73fe\u5c07\u5176\u7c21\u5316\u4ee3\u78bc\u6458\u9304\u5982\u4e0b\u3002<\/p>\n

\u539f\u5730\u5740\u898b\uff1a http:\/\/www.imaputz.com\/cssStuff\/bulletVersion.html\u3002<\/p>\n

<\/p>\n

\n\n<style type=\"\"text\/css\"\">\n<!--\nbody {\nbackground: #FFF;\ncolor: #000;\nfont: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;\nmargin: 10px;\npadding: 0\n}\n\ntable, td, a {\ncolor: #000;\nfont: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif\n}\n\n.td\n{\nnowrap:'true';\n}\n\ndiv.tableContainer {\nclear: both;\nborder: 1px solid #963;\nheight: 285px;\noverflow: auto;\nwidth: 100%;\n}\n\n\/* WinIE 6.x needs to re-account for it's scrollbar. Give it some padding *\/\nhtml div.tableContainer\/* *\/ {\npadding: 0 16px 0 0\n}\n\n\/* clean up for allowing display Opera 5.x\/6.x and MacIE 5.x *\/\nhtml>body div.tableContainer {\nheight: auto;\npadding: 0;\nwidth: 740px\n}\n\n\/* Reset overflow value to hidden for all non-IE browsers. *\/\n\/* Filter out Opera 5.x\/6.x and MacIE 5.x                  *\/\nhead:first-child+body div[class].tableContainer {\nheight: 285px;\noverflow: hidden;\nwidth: 756px\n}\n\n\/* define width of table. IE browsers only                 *\/\n\/* if width is set to 100%, you can remove the width       *\/\n\/* property from div.tableContainer and have the div scale *\/\ndiv.tableContainer table {\nfloat: left;\nwidth: 100%\n}\n\n\/* WinIE 6.x needs to re-account for padding. Give it a negative margin *\/\nhtml div.tableContainer table\/* *\/ {\nmargin: 0 -16px 0 0\n}\n\n\/* define width of table. Opera 5.x\/6.x and MacIE 5.x *\/\nhtml>body div.tableContainer table {\nfloat: none;\nmargin: 0;\nwidth: 740px\n}\n\n\/* define width of table. Add 16px to width for scrollbar.           *\/\n\/* All other non-IE browsers. Filter out Opera 5.x\/6.x and MacIE 5.x *\/\nhead:first-child+body div[class].tableContainer table {\nwidth: 756px\n}\n\n\/* set table header to a fixed position. WinIE 6.x only                                       *\/\n\/* In WinIE 6.x, any element with a position property set to relative and is a child of       *\/\n\/* an element that has an overflow property set, the relative value translates into fixed.    *\/\n\/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto *\/\nthead.fixedHeader tr {\nposition: relative;\n\/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution      *\/\ntop: expression(document.getElementById(\"tableContainer\").scrollTop)\n}\n\n\/* set THEAD element to have block level attributes. All other non-IE browsers            *\/\n\/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers *\/\n\/* Filter out Opera 5.x\/6.x and MacIE 5.x                                                 *\/\nhead:first-child+body thead[class].fixedHeader tr {\ndisplay: block\n}\n\n\/* make the TH elements pretty *\/\nthead.fixedHeader th {\nbackground: #C96;\nborder-left: 1px solid #EB8;\nborder-right: 1px solid #B74;\nborder-top: 1px solid #EB8;\nfont-weight: normal;\npadding: 4px 3px;\ntext-align: center\n}\n\n\/* make the A elements pretty. makes for nice clickable headers                *\/\nthead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {\ncolor: #FFF;\ndisplay: block;\ntext-decoration: none;\nwidth: 100%\n}\n\n\/* make the A elements pretty. makes for nice clickable headers                *\/\n\/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   *\/\nthead.fixedHeader a:hover {\ncolor: #FFF;\ndisplay: block;\ntext-decoration: underline;\nwidth: 100%\n}\n\n\/* define the table content to be scrollable                                              *\/\n\/* set TBODY element to have block level attributes. All other non-IE browsers            *\/\n\/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers *\/\n\/* induced side effect is that child TDs no longer accept width: auto                     *\/\n\/* Filter out Opera 5.x\/6.x and MacIE 5.x                                                 *\/\nhead:first-child+body tbody[class].scrollContent {\ndisplay: block;\nheight: 262px;\noverflow: auto;\nwidth: 100%\n}\n\n\/* make TD elements pretty. Provide alternating classes for striping the table *\/\n\/* http:\/\/www.alistapart.com\/articles\/zebratables\/                             *\/\ntbody.scrollContent td, tbody.scrollContent tr.normalRow td {\nbackground: #FFF;\nborder-bottom: 1px solid #EEE;\nborder-left: 1px solid #EEE;\nborder-right: 1px solid #AAA;\nborder-top: 1px solid #AAA;\npadding: 2px 3px\n}\n\ntbody.scrollContent tr.alternateRow td {\nbackground: #EEE;\nborder-bottom: 1px solid #EEE;\nborder-left: 1px solid #EEE;\nborder-right: 1px solid #AAA;\nborder-top: 1px solid #AAA;\npadding: 2px 3px\n}\n\n\/* define width of TH elements: 1st, 2nd, and 3rd respectively.      *\/\n\/* All other non-IE browsers. Filter out Opera 5.x\/6.x and MacIE 5.x *\/\n\/* Add 16px to last TH for scrollbar padding                         *\/\n\/* http:\/\/www.w3.org\/TR\/REC-CSS2\/selector.html#adjacent-selectors    *\/\nhead:first-child+body thead[class].fixedHeader th {\nwidth: 200px\n}\n\nhead:first-child+body thead[class].fixedHeader th + th {\nwidth: 250px\n}\n\nhead:first-child+body thead[class].fixedHeader th + th + th {\nborder-right: none;\npadding: 4px 4px 4px 3px;\nwidth: 316px\n}\n\n\/* define width of TH elements: 1st, 2nd, and 3rd respectively.      *\/\n\/* All other non-IE browsers. Filter out Opera 5.x\/6.x and MacIE 5.x *\/\n\/* Add 16px to last TH for scrollbar padding                         *\/\n\/* http:\/\/www.w3.org\/TR\/REC-CSS2\/selector.html#adjacent-selectors    *\/\nhead:first-child+body tbody[class].scrollContent td {\nwidth: 200px\n}\n\nhead:first-child+body tbody[class].scrollContent td + td {\nwidth: 250px\n}\n\nhead:first-child+body tbody[class].scrollContent td + td + td {\nborder-right: none;\npadding: 2px 4px 2px 3px;\nwidth: 300px\n\n\/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution *\/\ntop: expression(document.getElementById(\"tableContainer\").scrollTop)\n}\n-->\n<\/style>\n<\/pre>\n
<div class=””tableContainer”” id=””tableContainer””>
\n<table class=””scrollTable”” cellspacing=””0″” cellpadding=””0″” width=””100%”” border=””0″”>
\n<thead class=””fixedHeader””>
\n<tr>
\n<th><a href=”http:\/\/say881.mtgbb.com\/owner\/entry\/edit\/”#””>Header 1<\/a><\/th>
\n<th><a href=”http:\/\/say881.mtgbb.com\/owner\/entry\/edit\/”#””>Header 2<\/a><\/th>
\n<th><a href=”http:\/\/say881.mtgbb.com\/owner\/entry\/edit\/”#””>Header 3<\/a><\/th>
\n<th><a href=”http:\/\/say881.mtgbb.com\/owner\/entry\/edit\/”#””>Header 4<\/a><\/th>
\n<th><a href=”http:\/\/say881.mtgbb.com\/owner\/entry\/edit\/”#””>Header 5<\/a><\/th>
\n<th><a href=”http:\/\/say881.mtgbb.com\/owner\/entry\/edit\/”#””>Header 6<\/a><\/th>
\n<th><a href=”http:\/\/say881.mtgbb.com\/owner\/entry\/edit\/”#””>Header 7<\/a><\/th>
\n<\/tr>
\n<\/thead>
\n<tbody class=””scrollContent””>
\n<tr>
\n<td>Cell Content 1<\/td>
\n<td>Cell Content 2<\/td>
\n<td>Cell Content 3<\/td>
\n<td>Cell Content 4<\/td>
\n<td>Cell Content 5<\/td>
\n<td>Cell Content 6<\/td>
\n<td>Cell Content 7<\/td>
\n<\/tr>
\n<tr>
\n<td>More Cell Content 1<\/td>
\n<td>More Cell Content 2<\/td>
\n<td>More Cell Content 3<\/td>
\n<td>More Cell Content 4<\/td>
\n<td>More Cell Content 5<\/td>
\n<td>More Cell Content 6<\/td>
\n<td>More Cell Content 7<\/td>
\n<\/tr>
\n<tr>
\n<td>Even More Cell Content 1<\/td>
\n<td>Even More Cell Content 2<\/td>
\n<td>Even More Cell Content 3<\/td>
\n<td>Even More Cell Content 4<\/td>
\n<td>Even More Cell Content 5<\/td>
\n<td>Even More Cell Content 6<\/td>
\n<td>Even More Cell Content 7<\/td>
\n<\/tr>
\n<tr>
\n<td>And Repeat 1<\/td>
\n<td>And Repeat 2<\/td>
\n<td>And Repeat 3<\/td>
\n<td>And Repeat 4<\/td>
\n<td>And Repeat 5<\/td>
\n<td>And Repeat 6<\/td>
\n<td>And Repeat 7<\/td>
\n<\/tr>
\n<\/tbody>
\n<\/table>
\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
\u8cc7\u6599\u4f86\u6e90\uff1aCSDN\u6280\u8853\u4e2d\u5fc3\u3001superhasty \u7684 Blog \u7d93\u5728\u9805\u76ee\u4e2d\u5be6\u73fe\u904e\u4e00\u500b\u56fa\u5b9a\u8868\u982d\u7684HTML\u8868\u683c\uff0c\u4f46 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[28],"class_list":["post-296","post","type-post","status-publish","format-standard","hentry","category-others","tag-css"],"_links":{"self":[{"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=\/wp\/v2\/posts\/296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=296"}],"version-history":[{"count":0,"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=\/wp\/v2\/posts\/296\/revisions"}],"wp:attachment":[{"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/j178.mtgbb.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}