ptg16476052466 LESSON 16: Using Responsive Web Design
While there is no horizontal scrolling, the table is very difficult to read on the iPhone
without zooming. So instead of making the font size smaller, you could rearrange the
table when it’s displaying on a small screen. If you replace the CSS in the table with this:Input ▼
/* styles for all devices */
table { border-collapse: collapse; }/* styles for small devices */
@media (max-width:720px){
table { border: none; }
/* display the whole table as a block */
table, thead, tbody, th, td, tr { display: block; }
/* Hide the headers */
thead tr { position: absolute; top: -9999px; left: -9999px; }
tr { border: 1px solid #ccc; margin-bottom: 1em; }
tr:nth-of-type(odd) { background: #eee; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 20%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 1px;
left: 2px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/* Label the data */
td:nth-of-type(1):before { content: "Name "; }
td:nth-of-type(2):before { content: "URL "; }
td:nth-of-type(3):before { content: "RWD? " ; }
td:nth-of-type(4):before { content: "Win "; }
td:nth-of-type(5):before { content: "Mac "; }
}/* styles for larger devices */
@media (min-width:721px) {
tr:nth-child(2n+1) { background-color: #80C5F5; }
table thead tr:nth-child(n) { background-color: #3d447e; color: #dfdfdf; }
}