GDC Training Portal

Special Table Style 03

Function


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端采用了不同结构,所以无法通过table相关的DPL实现,只能通过代码形式展示。

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
1

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
2

Truncated cube
retroreflective technology


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

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. / 按照需求完成表格内容,并修改表格样式

HTML CODE:
<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;}
</style>
<div class="tab_box">
<table>
      <!-- Table code -->
</table>
</div>

更改地区
中国大陆 - 中文