Table
Table (테이블)
Bulma 테이블은 네이티브 HTML <table> 요소에 table CSS 클래스 하나만 붙이면 만들어져요. 특수한 셀 처리를 지원하기 때문에 현실적인 데이터 표를 다루기 좋아요.
출처: 문서
본문
다음 구조의 <table> HTML 요소에 table CSS 클래스 하나만 붙이면 Bulma 테이블을 만들 수 있어요.
<table>— 메인 컨테이너thead— 테이블의 선택적인 상단 부분tfoot— 테이블의 선택적인 하단 부분tbody— 테이블의 메인 콘텐츠tr— 각 테이블 행th— 테이블 셀 제목td— 테이블 셀
<tr>에 is-selected 수정자를 붙이면 해당 행을 선택된 상태로 표시할 수 있어요.
Example
<table class="table">
<thead>
<tr>
<th>Pos</th>
<th>Team</th>
<th>Pld</th>
<th>W</th>
<th>D</th>
<th>L</th>
<th>GF</th>
<th>GA</th>
<th>GD</th>
<th>Pts</th>
<th>Qualification or relegation</th>
</tr>
</thead>
<tbody>
<tr class="is-selected">
<th>1</th>
<td>Leicester City (C)</td>
<td>38</td><td>23</td><td>12</td><td>3</td>
<td>68</td><td>36</td><td>+32</td><td>81</td>
<td>Qualification for the Champions League group stage</td>
</tr>
<tr>
<th>2</th>
<td>Arsenal</td>
<td>38</td><td>20</td><td>11</td><td>7</td>
<td>65</td><td>36</td><td>+29</td><td>71</td>
<td>Qualification for the Champions League group stage</td>
</tr>
<tr>
<th>3</th>
<td>Tottenham Hotspur</td>
<td>38</td><td>19</td><td>13</td><td>6</td>
<td>69</td><td>35</td><td>+34</td><td>70</td>
<td>Qualification for the Champions League group stage</td>
</tr>
<!-- more rows -->
</tbody>
</table>
수정자 (Modifiers)
테이블에는 여러 수정자 클래스를 사용할 수 있어요.
is-bordered— 모든 셀에 테두리를 추가is-striped— 모든 짝수 행에 배경색을 추가is-narrow— 셀 너비를 좁혀서 더 많은 콘텐츠를 한 줄에 배치is-hoverable— 행에 마우스를 올리면 배경색이 옅게 표시is-fullwidth— 테이블이 전체 너비를 차지
컨테이너 (Containers)
테이블을 가로 스크롤 가능하게 하고 싶다면 table-container 클래스를 사용해서 테이블을 감싸면 돼요. 이렇게 하면 화면이 좁을 때 테이블이 넘치지 않고 가로로 스크롤되면서 데이터가 잘리지 않아요.
<div class="table-container">
<table class="table">
<!-- table content -->
</table>
</div>