Special Table Style 01

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.
该表格使用了不同的配色以及图片背景，并且移动端和PC端采用了不同结构，所以无法通过table相关的DPL实现，只能通过代码形式展示。

PC display:

Mobile display:

Example Display

此 portlet 不可用。

How to use?

Steps

1. Copy below code and replace the content. / 在页面中建立rC-58 DPL, 复制下方代码，替换表格内容

2. Update the style for each columns as request. / 按照需求改变表格展示样式

HTML CODE:

<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>

Special Table Style 01

Function

Example Display

How to use?

Steps