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 <table></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 -->
예제 :
