GDC Training Portal

Special Table Style 03


This table use the different colors and pictures for the column background, so we should not use the rTBL-50-HorizontalScroll, we can use rC-58 to adjust the code to display different styles on the PC and mobile terminals. and different style in PC and mobile.

PC display:
The table has full-width of the screen. / table宽度充满屏幕

Mobile display:
Use the scroll bar to view the whole table. / 让用户使用滚动条查看超出内容

Example Display

Day & Night Views Percentage Light Returned to Driver IRC Sheeting Class ASTM Type Products
3m reflective sheeting engineering grade 14% Class A Type I

Polycarbonate cube corner
retroreflective technology

3M™ Engineer Grade Sheeting
3M™ Advanced Engineer Grade Prismatic Sheeting
high intensity prismatic reflective sheeting 32% Class B Type III, IV

Truncated cube
retroreflective technology

3M™ High Intensity Sheeting
3m diamond grade reflective sheeting 58% Class C Type VIII, IX, XI

Full cube
retroreflective technology

3M™ Diamond Grade™ Sheeting

How to use?

  • Step

    Attention points: / 注意点

    1. Set the 'width:100%' for table in pc code, and set 'overflow: scroll;' for table in mobile code. / 为PC端代码里设置表格宽度100%,在移动端代码里设置 'overflow: scroll;'

    2. Fill table content as request, and set the table style. / 按照需求完成表格内容,并修改表格样式

<style type="text/css">
/* mobile style */
@media screen and (min-width:1px) and (max-width:768px){
.tab_box {overflow: scroll;}
table {width: 200%;}
/* pc style */
@media screen and (min-width:768px) {
table {width: 100%;}
table {border:1px solid #000;border-collapse:collapse;}
<div class="tab_box">
      <!-- Table code -->