超好看的表格响应式布局小技巧

浠婂ぉ閬囧埌涓€涓緢鏈夋剰鎬濈殑闂銆傛湁缇ゅ弸闂垜鍙敤CSS鑳戒笉鑳藉疄鐜拌繖鏍风殑鍝嶅簲寮忓竷灞€鏁堟灉锛氱畝鍗曞垎鏋愪笅鏁堟灉锛氬綋灞忓箷瑙嗗彛姣旇緝瀹芥椂锛屾暣浣撳憟鐜颁负Table鏍峰紡銆傚綋灞忓箷瑙嗗彛瀹藉害杈冨皬鏃讹紝灏嗗師Table涓殑姣忎竴琛屾暟鎹媶鍒嗘垚涓€涓猅able杩涜鏄剧ず銆備竴涓湁瓒ｇ殑鍝嶅簲寮忓竷灞€锛屽厑璁镐俊鎭樉绀哄湪涓€涓皬灞忓箷涓婏紝鏄剧ず鏁堟灉寰堝ソ銆傞偅涔堬紝鏄惁鍙互浠呬娇鐢–SS鏉ュ疄鐜拌繖鏍风殑甯冨眬鍛紵绛旀鏄偗瀹氱殑銆傞鍏堬紝鑲畾浼氱敤鍒板獟浣撴煡璇紝杩欎竴鐐逛笉闅剧湅鍑恒€傚彟澶栵紝鎴戜滑瑙傚療鎷嗗垎鍚庣殑姣忕粍鏁版嵁锛氬綋鏈変竴涓畬鏁寸殑Table鏃讹紝浼氭湁涓€缁勮〃澶翠俊鎭€傝繖閲岀殑涓昏闅剧偣鍦ㄤ簬鎴戜滑濡備綍灏嗗畠涓€涓竴涓湴鎷嗗垎鎴愬瓙琛ㄣ€傛樉绀烘爣棰樹俊鎭紵鍩烘湰缁撴瀯鐨勫疄鐜伴鍏堬紝鎴戜滑鍏堝疄鐜板父瑙勫灞忎笅鐨凥TML鍜岀浉搴旂殑CSS銆傛瘮杈冪畝鍗曪紝杩欓噷娌′粈涔堢壒鍒殑锛屽彲浠ョ敤

鏍囩鎴栬€呯敤div銆乽l绛夋爣绛炬ā鎷熶竴涓〃鏍笺€?table>PeriodVisa-341204/01/20161,19003/01/2016-03/31/2016//...閲嶅澶氱粍

Loremipsum!

Account	DueDate	Amount

寰楀埌杩欐牱涓€涓畝鍗曠殑Table锛氫娇鐢╩ediaquery灏嗗崟涓猅able鎷嗗垎鎴愬涓帴涓嬫潵鐨勬楠や篃寰堢畝鍗曪紝璁剧疆鍚堥€傜殑闃堝€硷紙鏍规嵁瀹為檯涓氬姟鑰屽畾锛塻ituation锛夛紝浣跨敤濯掍綋鏌ヨ灏嗗崟涓〃鎷嗗垎涓哄涓瓙琛ㄣ€侤mediascreenand(max-width:600px){table{border:0;}琛╰head{鏄剧ず锛氭棤锛泒琛╰r{鏄剧ず锛氬潡锛涘簳閮ㄨ竟璺濓細10px锛泒tabletd{border-bottom:1pxsolid#ddd;鏄剧ず锛氬潡锛涜繖閲屽仛鐨勪篃寰堢畝鍗曪細浣跨敤濯掍綋鏌ヨ锛岃缃睆骞曞搴﹀皬浜?00px鐨勬牱寮忥紝鍘绘帀鍘熻〃鐨?thead>琛ㄥご锛岀洿鎺ラ殣钘忓師琛?tr>锛岃缃负display:block锛屽苟璁剧疆涓€涓猙ottommargin锛屽皢鍘熻涓殑姣忎釜鍒嗗紑锛岃缃负display:block锛岃繖鏍峰畠浠氨浼氬瀭鐩存帓鍒楋紝杩欐牱姣忎釜灏卞舰鎴愪竴涓柊鐨勫瓙琛ㄥ氨濂戒簡銆傝繖鏍凤紝褰撳睆骞曞搴﹀皬浜?00px鏃讹紝鎴戜滑寰楀埌浜嗚繖鏍蜂竴涓猅able锛氬€熷姪浼厓绱犲強鍏剁壒鎬э紝鎺ヤ笅鏉ュ氨鏄渶鍏抽敭鐨勪竴姝ワ紝灏辨槸濡備綍鍦ㄥ瓙琛ㄣ€傚湪琛ㄦ牸鐨勬瘡涓€琛岋紝鍗?td>涓樉绀哄師濮嬭〃澶翠俊鎭浣曪紵杩欓噷鍏跺疄寰堢畝鍗曪紝灏辨槸绠€鍗曠殑浣跨敤浼厓绱狅紝閫氳繃涓€涓彲浠ヨ鍙朒TML鏍囩灞炴€х殑灏忕壒鎬у氨鍙互瀹炵幇銆傛垜浠彧闇€瑕佺畝鍗曠殑淇敼浠ｇ爜锛岀粰姣忎釜HTML鍔犱笂鐩稿簲鐨刪eader鍒楁弿杩颁俊鎭細//涓婇潰鐨勪俊鎭槸涓€鑷寸殑Visa-341204/01/20161,19003/01/2016-03/31/2016Visa-607603/01/20162,44302/01/2016-02/29/2016//...姣忎釜tr閮界敤鍚屾牱鐨勬柟寮忓鐞?/tbody>鐒跺悗锛屽€熷姪td浼厓绱狅紝鍙互鏄剧ず琛ㄥご淇℃伅锛欯mediascreenand(max-width:600px){//...淇濇寔涓€鑷磘abletd{position:relative;鏄剧ず锛氬潡锛涙枃鏈榻愶細鍙筹紱}琛╰d::before{浣嶇疆锛氱粷瀵癸紱宸︼細10px锛涘彸锛?锛涘唴瀹癸細灞炴€э紙鏁版嵁鏍囩锛夛紱}}杩欓噷锛屾垜浠殑鏍稿績鐭ヨ瘑鐐规槸鍒╃敤鍏冪礌鐨勪吉鍏冪礌锛屽湪content灞炴€т腑璇诲彇鍏禜TML鍏冪礌銆傝繖鏍凤紝鎴戜滑鍦ㄥ皬灞忓箷涓嬪緱鍒拌繖鏍蜂竴涓晥鏋滐細瀹屾暣鐨勬晥鏋滐紝鍗冲鍥炬爣棰樺浘鐗囷細瀹屾暣DEMO锛屽彲浠ョ偣杩欓噷锛欳odePenDemo--CSSSimpleResponsiveTable鏈€鍚庝竴涓皬鎶€宸э紝浣犲浼氫簡鍚楋紵鏈枃鍒版缁撴潫锛屽笇鏈涘浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳€荤粨鍦ㄦ垜鐨凣ithub--iCSS锛屾寔缁洿鏂帮紝娆㈣繋鐐逛釜鏄熻闃呮敹钘忋€傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>