css in order to effectively display this information inside of a
Mobile Safari viewport:
table {
width: 100%;
font-size: 14px;
border-collapse: collapse;
color: #305A6D;
text-align: left;
}
th {
height: 29px;
padding-left: 11px;
padding-right: 11px;
color: #FFFFFF;
text-align: left;
margin: 0 0 8px 14px;
font-size: inherit;
font-weight: bold;
color: #4d4d70;
text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 0;
padding-left: 2px;
}
td {
height: 2em;
padding: 1px;
padding-left: 2px;
}
tr.row-a {
background: #F8F8F8;
}
tr.row-b {
background: #EFEFEF;
}
The table is set to 100 percent of the div container. The remaining rules set basic formatting properties
for the th , td , and tr elements. You will notice that the font size is smaller (14px) than is normal for
Mobile Safari applications. The reason is twofold. First, no links are added to these tables, so users will
never need to tap onto the smaller text. Second, the 14px size is large enough for easy reading, but small
enough to display several columns of tabular information. Figure 11 - 8 shows the Standings page
under Safari.
The four Schedule pages use the identical styles, except that the HTML table declaration specifies a
border=???0??? attribute to display a slightly different look (see Figure 11 - 9 ).
Pages:
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293