Tables
Tables are challenging when supporting different screen sizes. This will outline table differences between screen sizes. Tables below are not reformatted when changing screen sizes.
Large and XLarge Screens
Larger screens can use standard tables. Alternating rows are given a background color.
| service | main domain | expires on | renewal | actions |
|---|---|---|---|---|
| cloud sites | userdomain.com | 9/15/2015 | ||
| dev cloud | myserver.com | 8/21/2015 | ||
| dev cloud | myserver2.com | 10/29/2015 |
Note: need to change out the use of Select for the custom dropdown as shown on the Buttons page. Need to implement a jQuery function to change the button name to match the selection.
XSmall, Small and Medium Screens
Responsive tables are difficult to create. For xsmall screens (< 568px) and small screens (≥ 568px but < 768px), tables need to be converted to no more than 3 columns with data that is displayed in one row on a large screen distributed between multiple rows on a small screen. If responsive tables can be supported, use them for medium size screens (≥ 768px but < 1024px).
| cloud sites hosting | $10.00 |
| main domain | userdomain.com |
| starts on 7-30-15 | term: monthly |
| domain registration | $14.95 |
| userdomain.com | qty 1 |
| starts on 7-30-15 | term: annual |
| subtotal | $24.94 |
| tax | $0.00 |
| credit | $0.00 |
| TOTAL | $24.94 |