|
|
| Line 14: |
Line 14: |
| | div#contentSidebar { | | div#contentSidebar { |
| | border:1px dashed #a7d7f9;padding:0.5em 1em;float:right;margin-left:2em; | | border:1px dashed #a7d7f9;padding:0.5em 1em;float:right;margin-left:2em; |
| − | }
| |
| − | /*
| |
| − | Max width before this PARTICULAR table gets nasty
| |
| − | This query will take effect for any screen smaller than 760px
| |
| − | and also iPads specifically.
| |
| − | */
| |
| − | @media
| |
| − | only screen and (max-width: 760px),
| |
| − | (min-device-width: 768px) and (max-device-width: 1024px) {
| |
| − |
| |
| − | /* Force table to not be like tables anymore */
| |
| − | table.transformable,
| |
| − | table.transformable thead,
| |
| − | table.transformable tbody,
| |
| − | table.transformable th,
| |
| − | table.transformable td,
| |
| − | table.transformable tr {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | /* Hide table headers (but not display: none;, for accessibility) */
| |
| − | table.transformable thead tr {
| |
| − | position: absolute;
| |
| − | top: -9999px;
| |
| − | left: -9999px;
| |
| − | }
| |
| − |
| |
| − | table.transformable tr { border: 1px solid #ccc; }
| |
| − |
| |
| − | table.transformable td {
| |
| − | /* Behave like a "row" */
| |
| − | border: none;
| |
| − | border-bottom: 1px solid #eee;
| |
| − | position: relative;
| |
| − | padding-left: 50%;
| |
| − | }
| |
| − |
| |
| − | table.transformable td:before {
| |
| − | /* Now like a table header */
| |
| − | position: absolute;
| |
| − | /* Top/left values mimic padding */
| |
| − | top: 6px;
| |
| − | left: 6px;
| |
| − | width: 45%;
| |
| − | padding-right: 10px;
| |
| − | white-space: nowrap;
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | Label the data
| |
| − | */
| |
| − | table.transformable td:nth-of-type(1):before { content: "First Name"; }
| |
| − | table.transformable td:nth-of-type(2):before { content: "Last Name"; }
| |
| − | table.transformable td:nth-of-type(3):before { content: "Job Title"; }
| |
| − | table.transformable td:nth-of-type(4):before { content: "Favorite Color"; }
| |
| − | table.transformable td:nth-of-type(5):before { content: "Wars of Trek?"; }
| |
| − | table.transformable td:nth-of-type(6):before { content: "Porn Name"; }
| |
| − | table.transformable td:nth-of-type(7):before { content: "Date of Birth"; }
| |
| − | table.transformable td:nth-of-type(8):before { content: "Dream Vacation City"; }
| |
| − | table.transformable td:nth-of-type(9):before { content: "GPA"; }
| |
| − | table.transformable td:nth-of-type(10):before { content: "Arbitrary Data"; }
| |
| | } | | } |
