GDC Training Portal

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

Cardiology

Classic

Lightweight

littmann cardiology littmann classic stethoscope lightweight stethoscope

Designed to help you detect more of the subtlest sounds that could make a difference in diagnoses.


• Outstanding acoustic performance due to larger and deeper chestpiece

• Dual-lumen tubing eliminates the rubbing noise of traditional double tubes

• Tunable technology enables switching between hearing high- and low-frequency sounds without repositioning chestpiece

• For detailed diagnostic auscultation



SEE ALL CARDIOLOGY STETHOSCOPES

Hard-working clinical tool with the acoustic sensitivity and versatility you can rely on.


• Consistent high acoustic sensitivity from precision-machined chestpieces

• Resilient, next-generation single-lumen tubing provides longer product life

• Nearly all Classic stethoscopes feature tunable technology

• Compact design is ideal for physical assessment and monitoring of your patients



SEE ALL CLASSIC STETHOSCOPES

Lightweight without compromising on sound quality.


• Reliable acoustic performance via a teardrop-shaped chestpiece that slips under bandages and blood pressure cuffs easily

• Single lumen next-generation tubing

• Adult side of chestpiece features tunable technology

• Ideal for taking blood pressure readings and making basic patient assessments




SEE ALL LIGHTWEIGHT STETHOSCOPES

Cardiology

littmann cardiology

Designed to help you detect more of the subtlest sounds that could make a difference in diagnoses.


• Outstanding acoustic performance due to larger and deeper chestpiece

• Dual-lumen tubing eliminates the rubbing noise of traditional double tubes

• Tunable technology enables switching between hearing high- and low-frequency sounds without repositioning chestpiece

• For detailed diagnostic auscultation



SEE ALL CARDIOLOGY STETHOSCOPES

Classic

littmann classic stethoscope

Hard-working clinical tool with the acoustic sensitivity and versatility you can rely on.


• Consistent high acoustic sensitivity from precision-machined chestpieces

• Resilient, next-generation single-lumen tubing provides longer product life

• Nearly all Classic stethoscopes feature tunable technology

• Compact design is ideal for physical assessment and monitoring of your patients



SEE ALL CLASSIC STETHOSCOPES

Lightweight

lightweight stethoscope

Lightweight without compromising on sound quality.


• Reliable acoustic performance via a teardrop-shaped chestpiece that slips under bandages and blood pressure cuffs easily

• Single lumen next-generation tubing

• Adult side of chestpiece features tunable technology

• Ideal for taking blood pressure readings and making basic patient assessments




SEE ALL LIGHTWEIGHT STETHOSCOPES

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>