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.
该表格使用了不同的配色以及图片背景,并且移动端和PC端采用了不同结构,所以无法通过table相关的DPL实现,只能通过代码形式展示。
PC display:
Mobile display:
1. Copy below code and replace the content. / 在页面中建立rC-58 DPL, 复制下方代码,替换表格内容
2. Update the style for each columns as request. / 按照需求改变表格展示样式
<style type="text/css">
table.MMM--Border tr td {font-size: 14px;}
.MMM--text-width{width:150px;text-align:center;}
.tr_text td {padding:10px 10px 10px 10px;}
@media screen and (min-width: 960px) {
#desktop_table {display: block;}
#mobile_table {display: none;}
}
@media screen and (min-width : 1px){.MMM--columnList>li{width:33%}}
@media screen and (min-width: 1px) and (max-width: 768px) {
#desktop_table {display: none;}
#mobile_table {display: block;}
}
</style>
<table id="desktop_table" frame="box" class="MMM--table MMM--Border" style="width:100%;">
<tr>
<td>line1 column1</td>
<td class="MMM--text-width">line1 column2</td>
<td class="MMM--text-width" >line1 column3</td>
</tr>
<tr>
<td>line2 column1</td>
<td class="MMM--text-width">line2 column2</td>
<td class="MMM--text-width" >line2 column3</td>
</tr>
<tr class="tr_text">
<td>line3 column1</td>
<td class="MMM--text-width">line3 column2</td>
<td class="MMM--text-width" >line3 column3</td>
</tr>
</table>
<div id="mobile_table">
<table frame="box"class="MMM--table MMM--Border" style="border-collapse:collapse;width:100%;">
<tr>
<td>line1 column1</td>
</tr>
<tr>
<td>line2 column1</td>
</tr>
<tr class="tr_text">
<td>line3 column1</td>
</tr>
</table>
<br>
<table frame="box"class="MMM--table MMM--Border" style="border-collapse:collapse;width:100%;">
<tr>
<td>line1 column2</td>
</tr>
<tr>
<td>line2 column2</td>
</tr>
<tr class="tr_text">
<td>line3 column2</td>
</tr>
</table>
<br>
<table frame="box"class="MMM--table MMM--Border" style="border-collapse:collapse;width:100%;">
<tr>
<td>line1 column3</td>
</tr>
<tr>
<td>line2 column3</td>
</tr>
<tr class="tr_text">
<td>line3 column3</td>
</tr>
</table>
</div>