【示例】
-
HTML
<h1>Responsive Tables </h1> <table id="rt1" class="rt cf"> <thead class="cf"> <tr> <th>Selector</th> <th>IE7</th> <th>IE8</th> <th>IE9</th> <th>FF 3.6</th> <th>FF 4</th> <th>Safari 5</th> <th>Chrome 5</th> <th>Opera 10</th> </tr> </thead> <tbody> <tr> <td>* selector</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> </tr> <tr> <td>:before :after</td> <td>no</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> </tr> <tr> <td>:nth-of-type()</td> <td>no</td> <td>no</td> <td>no</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>incorrect</td> </tr> <tr> <td>background-clip</td> <td>no</td> <td>no</td> <td>yes</td> <td>no</td> <td>yes</td> <td>-webkit-</td> <td>-webkit-</td> <td>buggy</td> </tr> <tr> <td>background-repeat</td> <td>incomplete</td> <td>incomplete</td> <td>yes</td> <td>incomplete</td> <td>incomplete</td> <td>incorrect</td> <td>incorrect</td> <td>yes</td> </tr> <tr> <td>::selection</td> <td>no</td> <td>no</td> <td>yes</td> <td>-moz-</td> <td>-moz-</td> <td>yes</td> <td>yes</td> <td>yes</td> </tr> </tbody> </table> <h2>CSS3 Flexible Box model</h2> <table id="rt2" class="rt cf"> <thead class="cf"> <tr> <th>Selector</th> <th>IE7</th> <th>IE8</th> <th>IE9</th> <th>FF 3.6</th> <th>FF 4</th> <th>Safari 5</th> <th>Chrome 5</th> <th>Opera 10</th> </tr> </thead> <tbody> <tr> <td>* selector</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> </tr> <tr> <td>:before :after</td> <td>no</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> </tr> <tr> <td>:nth-of-type()</td> <td>no</td> <td>no</td> <td>no</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>incorrect</td> </tr> <tr> <td>background-clip</td> <td>no</td> <td>no</td> <td>yes</td> <td>no</td> <td>yes</td> <td>-webkit-</td> <td>-webkit-</td> <td>buggy</td> </tr> <tr> <td>background-repeat</td> <td>incomplete</td> <td>incomplete</td> <td>yes</td> <td>incomplete</td> <td>incomplete</td> <td>incorrect</td> <td>incorrect</td> <td>yes</td> </tr> <tr> <td>::selection</td> <td>no</td> <td>no</td> <td>yes</td> <td>-moz-</td> <td>-moz-</td> <td>yes</td> <td>yes</td> <td>yes</td> </tr> </tbody> </table> -
CSS
.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .cf { zoom: 1; } *:first-child+html .cf { zoom: 1; } body, h1, h2, h3 { margin: 0; font-size: 100%; font-weight: normal; } code { padding: 0 .5em; background: #fff2b2; } body { padding: 1.25em; font-family: 'Helvetica Neue', Arial, sans-serif; background: #eee; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h1, h2 { margin: .5em 0; font-weight: bold; } .rt { width: 100%; font-size: 0.75em;/*12*/ line-height: 1.25em;/*15*/ border-collapse: collapse; border-spacing: 0; } .rt th, .rt td { margin: 0; padding: 0.4166em;/*10*/ vertical-align: top; border: 1px solid #babcbf; background: #fff; } .rt th { text-align: left; background: #fff2b2; } @media only screen and (max-width: 40em) { /*640*/ #rt1 { display: block; position: relative; width: 100%; } #rt1 thead { display: block; float: left; } #rt1 tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; } #rt1 thead tr { display: block; } #rt1 th { display: block; } #rt1 tbody tr { display: inline-block; vertical-align: top; } #rt1 td { display: block; min-height: 1.25em; } #rt2 { display: block; position: relative; width: 100%; } #rt2 thead { display: block; float: left; } #rt2 tbody { display: -webkit-box; overflow-x: auto; } #rt2 th, #rt2 tr, #rt2 td { display: block; } /* sort out borders */ .rt th { border-bottom: 0; } .rt td { border-left: 0; border-right: 0; border-bottom: 0; } .rt tbody tr { border-right: 1px solid #babcbf; } .rt th:last-child, .rt td:last-child { border-bottom: 1px solid #babcbf; } }