github.com/suntong/easygen@v5.3.0+incompatible/test/html-Table-RWD.html (about)

     1  <!doctype html>
     2  
     3  <!--
     4      !!! !!!
     5      WARNING: Code automatically generated. Editing discouraged.
     6      !!! !!!
     7  
     8    -->
     9  
    10  <html lang="en">
    11    <head>
    12      <meta charset="utf-8" />
    13  
    14      <style class="cp-pen-styles">@import "http://fonts.googleapis.com/css?family=Montserrat:300,400,700";
    15        .rwd-table {
    16        margin: 1em 0;
    17        min-width: 300px;
    18        }
    19        .rwd-table tr {
    20        border-top: 1px solid #ddd;
    21        border-bottom: 1px solid #ddd;
    22        }
    23        .rwd-table th {
    24        display: none;
    25        }
    26        .rwd-table td {
    27        display: block;
    28        }
    29        .rwd-table td:first-child {
    30        padding-top: .5em;
    31        }
    32        .rwd-table td:last-child {
    33        padding-bottom: .5em;
    34        }
    35        .rwd-table td:before {
    36        content: attr(data-th) ": ";
    37        font-weight: bold;
    38        width: 6.5em;
    39        display: inline-block;
    40        }
    41        @media (min-width: 480px) {
    42        .rwd-table td:before {
    43        display: none;
    44        }
    45        }
    46        .rwd-table th, .rwd-table td {
    47        text-align: left;
    48        }
    49        @media (min-width: 480px) {
    50        .rwd-table th, .rwd-table td {
    51        display: table-cell;
    52        padding: .25em .5em;
    53        }
    54        .rwd-table th:first-child, .rwd-table td:first-child {
    55        padding-left: 0;
    56        }
    57        .rwd-table th:last-child, .rwd-table td:last-child {
    58        padding-right: 0;
    59        }
    60        }
    61  
    62        body {
    63        padding: 0 2em;
    64        font-family: Montserrat, sans-serif;
    65        -webkit-font-smoothing: antialiased;
    66        text-rendering: optimizeLegibility;
    67        color: #444;
    68        background: #eee;
    69        }
    70  
    71        h1 {
    72        font-weight: normal;
    73        letter-spacing: -1px;
    74        color: #34495E;
    75        }
    76  
    77        .rwd-table {
    78        background: #34495E;
    79        color: #fff;
    80        border-radius: .4em;
    81        overflow: hidden;
    82        }
    83        .rwd-table tr {
    84        border-color: #46627f;
    85        }
    86        .rwd-table th, .rwd-table td {
    87        margin: .5em 1em;
    88        }
    89        @media (min-width: 480px) {
    90        .rwd-table th, .rwd-table td {
    91        padding: 1em !important;
    92        }
    93        }
    94        .rwd-table th, .rwd-table td:before {
    95        color: #dd5;
    96        }
    97      </style>
    98      
    99    </head>
   100  
   101    <body>
   102  
   103  
   104  
   105      <h2>Android Cell phones</h2>
   106  
   107      <table class="rwd-table">
   108        <tr>
   109  	<th>Module A</th>
   110  	<th>Module B</th>
   111  	<th>Module C</th>
   112        </tr>
   113  
   114        <tr>
   115  	<td>Samsung Galaxy A</td>
   116  	<td>Samsung Galaxy B</td>
   117  	<td>Samsung Galaxy C</td>
   118        </tr>
   119        <tr>
   120  	<td>Droid X A</td>
   121  	<td>Droid X B</td>
   122  	<td>Droid X C</td>
   123        </tr>
   124        <tr>
   125  	<td>HTC Desire A</td>
   126  	<td>HTC Desire B</td>
   127  	<td>HTC Desire C</td>
   128        </tr>
   129      </table>
   130  
   131  
   132      <h2>iPhone Cell phones</h2>
   133  
   134      <table class="rwd-table">
   135        <tr>
   136  	<th>Module A</th>
   137  	<th>Module B</th>
   138  	<th>Module C</th>
   139        </tr>
   140  
   141        <tr>
   142  	<td>Apple iPhone 4 A</td>
   143  	<td>Apple iPhone 4 B</td>
   144  	<td>Apple iPhone 4 C</td>
   145        </tr>
   146        <tr>
   147  	<td>Apple iPhone 5 A</td>
   148  	<td>Apple iPhone 5 B</td>
   149  	<td>Apple iPhone 5 C</td>
   150        </tr>
   151        <tr>
   152  	<td>Apple iPhone 6 A</td>
   153  	<td>Apple iPhone 6 B</td>
   154  	<td>Apple iPhone 6 C</td>
   155        </tr>
   156      </table>
   157  
   158  
   159      <h2>BlackBerry Cell phones</h2>
   160  
   161      <table class="rwd-table">
   162        <tr>
   163  	<th>Module A</th>
   164  	<th>Module B</th>
   165  	<th>Module C</th>
   166        </tr>
   167  
   168        <tr>
   169  	<td>BlackBerry Bold 9650 A</td>
   170  	<td>BlackBerry Bold 9650 B</td>
   171  	<td>BlackBerry Bold 9650 C</td>
   172        </tr>
   173        <tr>
   174  	<td>BlackBerry 10 A</td>
   175  	<td>BlackBerry 10 B</td>
   176  	<td>BlackBerry 10 C</td>
   177        </tr>
   178      </table>
   179  	
   180      
   181    </body>
   182  </html>