반응형 테이블 2번째 - table reflow

제목 : 반응형 테이블 2번째 - table reflow

소스 :

@media ( min-width: 40em ) {
	/* Show the table header rows and set all cells to display: table-cell */
	.my-custom-breakpoint td,
	.my-custom-breakpoint th,
	.my-custom-breakpoint tbody th,
	.my-custom-breakpoint tbody td,
	.my-custom-breakpoint thead td,
	.my-custom-breakpoint thead th {
		display: table-cell;
		margin: 0;
	}
	/* Hide the labels in each cell */
	.my-custom-breakpoint td .ui-table-cell-label,
	.my-custom-breakpoint th .ui-table-cell-label {
		display: none;
	}
}

<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive table-stroke">

  <thead>

    <tr>

      <th data-priority="1">Rank</th>

      <th data-priority="persist">Movie Title</th>

      <th data-priority="2">Year</th>

      <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>

      <th data-priority="4">Reviews</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th>1</th>

      <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>

      <td>1941</td>

      <td>100%</td>

      <td>74</td>

    </tr>

    <tr>

      <th>2</th>

      <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>

      <td>1942</td>

      <td>97%</td>

      <td>64</td>

    </tr>

    <tr>

      <th>3</th>

      <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>

      <td>1972</td>

      <td>97%</td>

      <td>87</td>

    </tr>

    <tr>

      <th>4</th>

      <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>

      <td>1939</td>

      <td>96%</td>

      <td>87</td>

    </tr>

    <tr>

      <th>5</th>

      <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>

      <td>1962</td>

      <td>94%</td>

      <td>87</td>

    </tr>

    <tr>

      <th>6</th>

      <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>

      <td>1964</td>

      <td>92%</td>

      <td>74</td>

    </tr>

    <tr>

      <th>7</th>

      <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>

      <td>1967</td>

      <td>91%</td>

      <td>122</td>

    </tr>

    <tr>

      <th>8</th>

      <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>

      <td>1939</td>

      <td>90%</td>

      <td>72</td>

    </tr>

    <tr>

      <th>9</th>

      <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>

      <td>1952</td>

      <td>89%</td>

      <td>85</td>

    </tr>

    <tr>

      <th>10</th>

      <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>

      <td>2010</td>

      <td>84%</td>

      <td>78</td>

    </tr>

  </tbody>

</table>

내용 :

모바일 환경에서 테이블의 가로 길이가 길면, 좌우 스크롤을 둬서 다 보여주던지, 아니면

아래 그림처럼 각 row 마다 title 을 각각 제공하는 식으로 table reflow 를 사용해도 좋다.

예제 소스 파일 :

 출처 :  http://view.jquerymobile.com/1.3.0/docs/widgets/table-reflow/