jQuery mobile <table>

Table css for jQuery mobile

by frankdenouter

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css">
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<div data-role="page">
    <div data-role="header"  data-theme="b">
        <h1>jQuery mobile &lt;table&gt;</h1>
    </div><!-- /header -->
    <div data-role="content">    
       <table>
           <tr><td>1,1</td><td>neat</td><td>100%</td></tr>
           <tr><td>2,1</td><td>table</td><td>90%</td></tr>
           <tr><td>3,1</td><td>in</td><td>80%</td></tr>
           <tr><td>4,1</td><td>jQuery</td><td>20%</td></tr>
           <tr><td>5,1</td><td>mobile</td><td>10%</td></tr>
       </table>
    </div><!-- /content -->
</div><!-- /page -->

CSS

table {
    color: black;
    background: #fff;
    border: 1px solid #b4b4b4;
    font: bold 17px helvetica;
    padding: 0;
    margin-top:10px;
    width: 100%;
    -webkit-border-radius: 8px;
}
     
table tr td {
    color: #666;
    border-bottom: 1px solid #b4b4b4;
    border-right: 1px solid #b4b4b4;
    padding: 10px 10px 10px 10px;
    background-image: -webkit-linear-gradient(top, #fdfdfd, #eee);
}
         
table tr td:last-child {
    border-right: none;
}

table tr:last-child td {
    border-bottom: none;
}