Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Understanding the Mechanics of RWD 465

16

If you view that on a smartphone, it would be too large for the screen and require hori-
zontal scrolling. But by resizing the text inside the table, you can help it fit better. Here is
the CSS I added:

/ styles for all devices /
table { border-collapse: collapse; font-size: 14px; }
/ zebra stripe the table /
table tr:nth-child(2n+1) { background-color: #dfdfdf; }
/ styles for devices larger than 650px wide /
@media screen and ( min-width:651px ) {
table { font-size: 16px; }
}

Figure 16.8 shows that there is no horizontal scrollbar on an iPhone.

Output ▼

FIGURE 16.8
No horizontal
scrolling to see the
table on an iPhone.