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
	14%	Class A	Type I	Polycarbonate cube corner retroreflective technology 3M™ Engineer Grade Sheeting 3M™ Advanced Engineer Grade Prismatic Sheeting
	32%	Class B	Type III, IV	Truncated cube retroreflective technology 3M™ High Intensity 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. / 按照需求完成表格内容，并修改表格样式

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>

Special Table Style 03

Function

Example Display

How to use?

Step