bulma/docs/documentation/elements/table.html
2018-04-09 22:25:26 +01:00

588 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Table
layout: documentation
doc-tab: elements
doc-subtab: table
breadcrumb:
- home
- documentation
- elements
- elements-table
meta:
colors: false
sizes: false
variables: true
---
{% capture table_example %}
<table class="table">
<thead>
<tr>
<th><abbr title="Position">Pos</abbr></th>
<th>Team</th>
<th><abbr title="Played">Pld</abbr></th>
<th><abbr title="Won">W</abbr></th>
<th><abbr title="Drawn">D</abbr></th>
<th><abbr title="Lost">L</abbr></th>
<th><abbr title="Goals for">GF</abbr></th>
<th><abbr title="Goals against">GA</abbr></th>
<th><abbr title="Goal difference">GD</abbr></th>
<th><abbr title="Points">Pts</abbr></th>
<th>Qualification or relegation</th>
</tr>
</thead>
<tfoot>
<tr>
<th><abbr title="Position">Pos</abbr></th>
<th>Team</th>
<th><abbr title="Played">Pld</abbr></th>
<th><abbr title="Won">W</abbr></th>
<th><abbr title="Drawn">D</abbr></th>
<th><abbr title="Lost">L</abbr></th>
<th><abbr title="Goals for">GF</abbr></th>
<th><abbr title="Goals against">GA</abbr></th>
<th><abbr title="Goal difference">GD</abbr></th>
<th><abbr title="Points">Pts</abbr></th>
<th>Qualification or relegation</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>1</th>
<td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
</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 <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="201617 UEFA Champions League">Champions League group stage</a></td>
</tr>
<tr>
<th>2</th>
<td><a href="https://en.wikipedia.org/wiki/Arsenal_F.C." title="Arsenal F.C.">Arsenal</a></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 <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="201617 UEFA Champions League">Champions League group stage</a></td>
</tr>
<tr>
<th>3</th>
<td><a href="https://en.wikipedia.org/wiki/Tottenham_Hotspur_F.C." title="Tottenham Hotspur F.C.">Tottenham Hotspur</a></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 <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="201617 UEFA Champions League">Champions League group stage</a></td>
</tr>
<tr class="is-selected">
<th>4</th>
<td><a href="https://en.wikipedia.org/wiki/Manchester_City_F.C." title="Manchester City F.C.">Manchester City</a></td>
<td>38</td>
<td>19</td>
<td>9</td>
<td>10</td>
<td>71</td>
<td>41</td>
<td>+30</td>
<td>66</td>
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Play-off_round" title="201617 UEFA Champions League">Champions League play-off round</a></td>
</tr>
<tr>
<th>5</th>
<td><a href="https://en.wikipedia.org/wiki/Manchester_United_F.C." title="Manchester United F.C.">Manchester United</a></td>
<td>38</td>
<td>19</td>
<td>9</td>
<td>10</td>
<td>49</td>
<td>35</td>
<td>+14</td>
<td>66</td>
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="201617 UEFA Europa League">Europa League group stage</a></td>
</tr>
<tr>
<th>6</th>
<td><a href="https://en.wikipedia.org/wiki/Southampton_F.C." title="Southampton F.C.">Southampton</a></td>
<td>38</td>
<td>18</td>
<td>9</td>
<td>11</td>
<td>59</td>
<td>41</td>
<td>+18</td>
<td>63</td>
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="201617 UEFA Europa League">Europa League group stage</a></td>
</tr>
<tr>
<th>7</th>
<td><a href="https://en.wikipedia.org/wiki/West_Ham_United_F.C." title="West Ham United F.C.">West Ham United</a></td>
<td>38</td>
<td>16</td>
<td>14</td>
<td>8</td>
<td>65</td>
<td>51</td>
<td>+14</td>
<td>62</td>
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Third_qualifying_round" title="201617 UEFA Europa League">Europa League third qualifying round</a></td>
</tr>
<tr>
<th>8</th>
<td><a href="https://en.wikipedia.org/wiki/Liverpool_F.C." title="Liverpool F.C.">Liverpool</a></td>
<td>38</td>
<td>16</td>
<td>12</td>
<td>10</td>
<td>63</td>
<td>50</td>
<td>+13</td>
<td>60</td>
<td></td>
</tr>
<tr>
<th>9</th>
<td><a href="https://en.wikipedia.org/wiki/Stoke_City_F.C." title="Stoke City F.C.">Stoke City</a></td>
<td>38</td>
<td>14</td>
<td>9</td>
<td>15</td>
<td>41</td>
<td>55</td>
<td>14</td>
<td>51</td>
<td></td>
</tr>
<tr>
<th>10</th>
<td><a href="https://en.wikipedia.org/wiki/Chelsea_F.C." title="Chelsea F.C.">Chelsea</a></td>
<td>38</td>
<td>12</td>
<td>14</td>
<td>12</td>
<td>59</td>
<td>53</td>
<td>+6</td>
<td>50</td>
<td></td>
</tr>
<tr>
<th>11</th>
<td><a href="https://en.wikipedia.org/wiki/Everton_F.C." title="Everton F.C.">Everton</a></td>
<td>38</td>
<td>11</td>
<td>14</td>
<td>13</td>
<td>59</td>
<td>55</td>
<td>+4</td>
<td>47</td>
<td></td>
</tr>
<tr>
<th>12</th>
<td><a href="https://en.wikipedia.org/wiki/Swansea_City_A.F.C." title="Swansea City A.F.C.">Swansea City</a></td>
<td>38</td>
<td>12</td>
<td>11</td>
<td>15</td>
<td>42</td>
<td>52</td>
<td>10</td>
<td>47</td>
<td></td>
</tr>
<tr>
<th>13</th>
<td><a href="https://en.wikipedia.org/wiki/Watford_F.C." title="Watford F.C.">Watford</a></td>
<td>38</td>
<td>12</td>
<td>9</td>
<td>17</td>
<td>40</td>
<td>50</td>
<td>10</td>
<td>45</td>
<td></td>
</tr>
<tr>
<th>14</th>
<td><a href="https://en.wikipedia.org/wiki/West_Bromwich_Albion_F.C." title="West Bromwich Albion F.C.">West Bromwich Albion</a></td>
<td>38</td>
<td>10</td>
<td>13</td>
<td>15</td>
<td>34</td>
<td>48</td>
<td>14</td>
<td>43</td>
<td></td>
</tr>
<tr>
<th>15</th>
<td><a href="https://en.wikipedia.org/wiki/Crystal_Palace_F.C." title="Crystal Palace F.C.">Crystal Palace</a></td>
<td>38</td>
<td>11</td>
<td>9</td>
<td>18</td>
<td>39</td>
<td>51</td>
<td>12</td>
<td>42</td>
<td></td>
</tr>
<tr>
<th>16</th>
<td><a href="https://en.wikipedia.org/wiki/A.F.C._Bournemouth" title="A.F.C. Bournemouth">AFC Bournemouth</a></td>
<td>38</td>
<td>11</td>
<td>9</td>
<td>18</td>
<td>45</td>
<td>67</td>
<td>22</td>
<td>42</td>
<td></td>
</tr>
<tr>
<th>17</th>
<td><a href="https://en.wikipedia.org/wiki/Sunderland_A.F.C." title="Sunderland A.F.C.">Sunderland</a></td>
<td>38</td>
<td>9</td>
<td>12</td>
<td>17</td>
<td>48</td>
<td>62</td>
<td>14</td>
<td>39</td>
<td></td>
</tr>
<tr>
<th>18</th>
<td><a href="https://en.wikipedia.org/wiki/Newcastle_United_F.C." title="Newcastle United F.C.">Newcastle United</a> <strong>(R)</strong>
</td>
<td>38</td>
<td>9</td>
<td>10</td>
<td>19</td>
<td>44</td>
<td>65</td>
<td>21</td>
<td>37</td>
<td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="201617 Football League Championship">Football League Championship</a></td>
</tr>
<tr>
<th>19</th>
<td><a href="https://en.wikipedia.org/wiki/Norwich_City_F.C." title="Norwich City F.C.">Norwich City</a> <strong>(R)</strong>
</td>
<td>38</td>
<td>9</td>
<td>7</td>
<td>22</td>
<td>39</td>
<td>67</td>
<td>28</td>
<td>34</td>
<td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="201617 Football League Championship">Football League Championship</a></td> </tr>
<tr>
<th>20</th>
<td><a href="https://en.wikipedia.org/wiki/Aston_Villa_F.C." title="Aston Villa F.C.">Aston Villa</a> <strong>(R)</strong>
</td>
<td>38</td>
<td>3</td>
<td>8</td>
<td>27</td>
<td>27</td>
<td>76</td>
<td>49</td>
<td>17</td>
<td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="201617 Football League Championship">Football League Championship</a></td>
</tr>
</tbody>
</table>
{% endcapture %}
<div class="content">
<p>You simply need to attach a single <code>.table</code> CSS class on a <code>&lt;table&gt;</code> with the following structure:</p>
<ul>
<li>
<code>table</code> the main <strong>container</strong>
<ul>
<li>
<code>thead</code> the optional <strong>top</strong> part of the table
</li>
<li>
<code>tfoot</code> the optional <strong>bottom</strong> part of the table
</li>
<li>
<code>tbody</code> the main <strong>content</strong> of the table
<ul>
<li>
<code>tr</code> each table <strong>row</strong>
<ul>
<li>
<code>th</code> a table cell <strong>heading</strong>
</li>
<li>
<code>td</code> a table <strong>cell</strong>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>
You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code>&lt;tr&gt;</code>
</p>
</div>
{% include elements/snippet.html content=table_example horizontal=true more=true %}
{% include elements/anchor.html name="Modifiers" %}
<div class="columns">
<div class="column">
<p>Add <strong>borders</strong> to all the cells.</p>
</div>
<div class="column">
<code>table is-bordered</code>
</div>
<div class="column is-half">
<table class="table is-bordered">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="columns">
<div class="column">
<p>Add <strong>stripes</strong> to the table.</p>
</div>
<div class="column">
<code>table is-striped</code>
</div>
<div class="column is-half">
<table class="table is-striped">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="columns">
<div class="column">
<p>Make the cells <strong>narrower</strong>.</p>
</div>
<div class="column">
<code>table is-narrow</code>
</div>
<div class="column is-half">
<table class="table is-narrow">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="columns">
<div class="column">
<p>You can add a <strong>hover effect</strong> on each row</p>
</div>
<div class="column">
<code>table is-hoverable</code>
</div>
<div class="column is-half">
<table class="table is-hoverable">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="columns">
<div class="column">
<p>You can have a <strong>fullwidth</strong> table.</p>
</div>
<div class="column">
<code>table is-fullwidth</code>
</div>
<div class="column is-half">
<table class="table is-fullwidth">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="columns">
<div class="column">
<p>You can <strong>combine</strong> all five modifiers.</p>
</div>
<div class="column">
<code>table is-bordered is-striped is-narrow is-hoverable is-fullwidth</code>
</div>
<div class="column is-half">
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
</div>
</div>
{% include elements/variables.html type='element' %}