{"id":24723,"date":"2017-09-07T00:13:00","date_gmt":"2017-09-06T14:13:00","guid":{"rendered":"https:\/\/codemyui.com\/?p=24723"},"modified":"2019-09-27T13:40:04","modified_gmt":"2019-09-27T03:40:04","slug":"nutrition-facts-table-using-html-css","status":"publish","type":"post","link":"https:\/\/codemyui.com\/nutrition-facts-table-using-html-css\/","title":{"rendered":"Nutrition Facts Table Using HTML &amp; CSS"},"content":{"rendered":"<p>Here is a <a href=\"https:\/\/codemyui.com\/tag\/pure-css\/\">CSS snippet<\/a> that you can use to display an HTML <a href=\"https:\/\/codemyui.com\/tag\/tables\/\">table<\/a> to look like a Nutrition Facts Label that can be found on packaged foods and beverages. It was designed by <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/twitter.com\/chriscoyier\">Chris Coyier<\/a>.<\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/f2a93e4765936bdcb67c22aea7d2f294\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a><\/p>\n<h2>Nutrition Facts Table Using CSS Snippet<\/h2>\n<p class='codepen'  data-height='799' data-theme-id='0' data-slug-hash='egHEK' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Nutrition Facts Table in HTML &amp; CSS by Chris Coyier  (@chriscoyier) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Here is a CSS snippet that you can use to display an HTML table to look like a Nutrition Facts Label that can be found on packaged foods and beverages. It was designed by Chris Coyier.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/nutrition-facts-table-using-html-css\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":28347,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[24232296,30305495,160209],"class_list":["post-24723","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-food-inspired","tag-pure-css","tag-tables","has-post-video","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Pure-CSS-Toggle-Blur-Layer-Visibility-Using-On-Off-Buttons-1.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":256,"url":"https:\/\/codemyui.com\/pure-css-responsive-tables\/","url_meta":{"origin":24723,"position":0},"title":"Pure CSS Responsive tables","author":"Hima Vincent","date":"June 5, 2015","format":false,"excerpt":"A simple table in pure CSS that is optimized for mobile devices.Designed by Chris Coyier.\u00a0 If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"input field\"","block_context":{"text":"input field","link":"https:\/\/codemyui.com\/tag\/input-field\/"},"img":{"alt_text":"Pure CSS Responsive tables","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/pure-css-responsive-tables.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/pure-css-responsive-tables.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/pure-css-responsive-tables.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/pure-css-responsive-tables.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":13662,"url":"https:\/\/codemyui.com\/appear-disappear-text-animation\/","url_meta":{"origin":24723,"position":1},"title":"Appear and Disappear Text Animation","author":"Hima Vincent","date":"March 23, 2017","format":false,"excerpt":"This is a text appearing and disappearing animation designed by Chris Coyier. This text animation will work well in the hero section of your next web design project. If you are having trouble with the pen, try the archived copy on GitHub FadeIn FadeOut Text Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Appear and Disappear Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Appear-and-Disappear-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Appear-and-Disappear-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Appear-and-Disappear-Text-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Appear-and-Disappear-Text-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26777,"url":"https:\/\/codemyui.com\/sticky-sidebar-navigation-on-scroll\/","url_meta":{"origin":24723,"position":2},"title":"Sticky Sidebar Navigation on Scroll","author":"Saijo George","date":"August 21, 2018","format":false,"excerpt":"With this amazing snippet by Chris Coyier you have a sticky sidebar with jump links to the various sections on the page. When you scroll down the page and hit the section with this menu it sticks on the right-hand side till that content block runs out. If you are\u2026","rel":"","context":"In \"navigation menu\"","block_context":{"text":"navigation menu","link":"https:\/\/codemyui.com\/tag\/navigation-menu\/"},"img":{"alt_text":"Sticky Sidebar Navigation on Scroll","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Sticky-Sidebar-Navigation-on-Scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Sticky-Sidebar-Navigation-on-Scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Sticky-Sidebar-Navigation-on-Scroll.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Sticky-Sidebar-Navigation-on-Scroll.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":1332,"url":"https:\/\/codemyui.com\/invision-inspired-right-click-logo-show-modal-download-option\/","url_meta":{"origin":24723,"position":3},"title":"InVision Inspired Right Click Logo to Show Modal with Download Option","author":"Hima Vincent","date":"July 28, 2016","format":false,"excerpt":"If you go to InVision and right-clicking their logo, the page opens a pop-up window that gives you the option to download a Zip packed folder of their logo. Now you can add that same feature to your website using this snippet, designed by Chris Coyier. If you are having\u2026","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"InVision Inspired Right Click Logo to Show Modal with Download Option","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/invision-inspired-right-click-logo-to-show-modal-with-download-option.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/invision-inspired-right-click-logo-to-show-modal-with-download-option.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/invision-inspired-right-click-logo-to-show-modal-with-download-option.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/invision-inspired-right-click-logo-to-show-modal-with-download-option.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":138,"url":"https:\/\/codemyui.com\/scroll-progress-animation\/","url_meta":{"origin":24723,"position":4},"title":"Scroll Progress Animation","author":"Hima Vincent","date":"October 8, 2015","format":false,"excerpt":"This is a cool scroll progress animation, where a line based logo is highlighted as you scroll down.This could be used to animate the logo as a user scrolls down on your site. Designed by Chris Coyier If you are having trouble with the pen, try the archived copy on\u2026","rel":"","context":"In \"logo\"","block_context":{"text":"logo","link":"https:\/\/codemyui.com\/tag\/logo\/"},"img":{"alt_text":"Scroll Progress Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/scroll-progress-animation-1.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/scroll-progress-animation-1.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/scroll-progress-animation-1.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/scroll-progress-animation-1.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26782,"url":"https:\/\/codemyui.com\/css-only-mobile-friendly-table-layout\/","url_meta":{"origin":24723,"position":5},"title":"CSS only Mobile Friendly Table Layout","author":"Saijo George","date":"August 21, 2018","format":false,"excerpt":"This responsive CSS only table design was designed by Flor Antara. We have a table with a header and on smaller devices like mobile phones the header is switched to a vertical layout and the content is scrollable horizontally. If you are having trouble with the pen, try the archived\u2026","rel":"","context":"In \"mobile optimised\"","block_context":{"text":"mobile optimised","link":"https:\/\/codemyui.com\/tag\/mobile-optimised\/"},"img":{"alt_text":"CSS only Mobile Friendly Table Layout","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/CSS-only-Mobile-Friendly-Table-Layout.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/CSS-only-Mobile-Friendly-Table-Layout.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/CSS-only-Mobile-Friendly-Table-Layout.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/CSS-only-Mobile-Friendly-Table-Layout.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=24723"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24723\/revisions"}],"predecessor-version":[{"id":28348,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24723\/revisions\/28348"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/28347"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=24723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=24723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=24723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}