Horizontal Computer Desk

Small Hideaway Desks



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.

See also:

  • GoodsHelp





Share this article





Related Posts


Home Office Desk storage
Home Office Desk storage

Latest Posts
Dining Table Reclaimed
Dining Table…
Payment We accept all major credit cards…
Dark Brown Dresser with Mirror
Dark Brown Dresser…
A beautifully traditional bedroom collection…
Reclaimed wood eBay
Reclaimed wood…
Wooden Coffee Table Decor Coffee Table…
Furniture legs wooden
Furniture legs…
16 in. Wood Round Taper Table Leg is…
Computer Desks with Hutch for Home
Computer Desks…
FREE SHIPPING on all orders purchased…
Search
Featured posts
  • Corner Desks for Home Office
  • Beautiful Bathroom Accessory Sets
  • Home Office Desk storage
  • Reclaimed Oak bedroom Furniture
  • 6 Drawer long Dresser
  • Fitted Bedroom Furniture B&Q
  • Contemporary Furniture Portland
  • Dark Brown Dresser with Mirror
  • Dining Table Reclaimed
Copyright © 2019 l www.reclaimed-pine-furniture.co.uk. All rights reserved.