jQuery mobile <table>

jQuery mobile를 사용하여 프로젝트를 진행하다가 보면 table태그를 사용해야 되는 경우가 있다.

하지만 jQuery mobile에서는 table태그를 지원하지 않는다.

인터넷 검색을 하면 바로 알겠지만 여러가지 방법을 제시를 하지만 막상 프로젝트에 바로 사용할 수 있는 딱 이거다 싶은 방법은 없다.

원리를 알고 수정하면서 적용을 해야 한다.

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;

}

html :

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

예제 :