Multifuction used home cnc

Small Desktop table



The CSS

body { font: 12px/1.4 Arial, Helvetica, sans-serif; color: #333; margin: 0; padding: 0; } table { border-collapse: collapse; padding: 0; margin: 0 0 11px 0; width: 100%; } table th { text-align: left; border-bottom: 2px solid #eee; vertical-align: bottom; padding: 0 10px 10px 10px; text-align: right; } table td { border-bottom: 1px solid #eee; vertical-align: top; padding: 10px; text-align: right; } table th:nth-child(1), table td:nth-child(1) { text-align: left; padding-left: 0; font-weight: bold; }

Above, basic CSS styling for the data table, as desktop users would see it.

Below, what the table will look like when it appears in a viewport that is 480px wide or narrower:

/* responsive table */ @media screen and (max-width: 480px) { table, tbody { display: block; width: 100%; }

Make the table display: block; instead of display: table; and make sure it spans the full width of the content well.

Hide the header row.

table tr, table th, table td { display: block; padding: 0; text-align: left; white-space: normal; }

Make all the

, would display as January: 6.5)

table td { border: none; margin-bottom: 6px; color: #444; }

Table cell style refinements.

table td:empty { display: none; }

Hide empty table cells.

table td:first-child { font-weight: bold; margin-bottom: 6px; color: #333; } table td:first-child:before { content: ''; }

Make the first table cell appear larger than the others — more like a header — and override the display of the data-title attribute.

And there you go!

At NPR, when we do simple tables like these, they’re usually meant to accompany stories in our CMS. To avoid conflicts, we like to keep the code for mini-projects like this graph compartmentalized from the CMS — saved in separate files and then added to the CMS via an iframe.

Iframes in a responsive site can be tricky, though. It’s easy enough to set the iframe’s width to 100% of its container, but what if the height of the content varies depending on its width (e.g., text wraps, or an image resizes)?

We recently released Pym.js, a JavaScript library that handles communication between an iframe and its parent page. It will size an iframe based on the width of its parent container and the height of its content.

The Table (To Be iFramed In)

At the bottom of your page, add this bit of JavaScript:

var pymChild = new pym.Child;

  • Sub out path/to/ with the actual published path to the file.





Share this article





Related Posts



Latest Posts
Bureau definition
Bureau definition
She did take off the papers, but no cloud…
Desk with File Cabinet Drawer
Desk with File…
Visual Nav Non Akamai Url - ESI cache…
Wood Counter Height Table Legs
Wood Counter…
What is Counter Height? Counter Height…
Contemporary Metal Furniture Legs & feet
Contemporary…
Most Comfortable Ikea Sleeper Sofa Modern…
Salvage Yards in Yorkshire
Salvage Yards…
This is the place to find the car parts…
Search
Featured posts
  • Pottery Barn Home Office Furniture
  • Bathroom Accessories set ideas
  • Desktop Computer storage Cabinet
  • Barnwood Furniture
  • White Four Drawer Dresser
  • Black Brown Bedroom Furniture
  • Contemporary Metal Furniture Legs & feet
  • Cheap Mirror Dresser
  • Dining Table Reclaimed
Copyright © 2019 l www.reclaimed-pine-furniture.co.uk. All rights reserved.