Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 10:14:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

376
docs/documentation/elements/table.html
View File

@@ -1,19 +1,19 @@
---
title: Table
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: table
breadcrumb:
- home
- documentation
- elements
- elements-table
- home
- documentation
- elements
- elements-table
meta:
colors: false
sizes: false
variables: true
---
{% capture table_example %}
<table class="table">
<thead>
@@ -49,7 +49,13 @@ meta:
<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>
<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>
@@ -59,11 +65,24 @@ meta:
<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="2016–17 UEFA Champions League">Champions League group stage</a></td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
title="2016–17 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>
<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>
@@ -72,11 +91,24 @@ meta:
<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="2016–17 UEFA Champions League">Champions League group stage</a></td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
title="2016–17 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>
<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>
@@ -85,11 +117,24 @@ meta:
<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="2016–17 UEFA Champions League">Champions League group stage</a></td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
title="2016–17 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>
<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>
@@ -98,11 +143,24 @@ meta:
<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="2016–17 UEFA Champions League">Champions League play-off round</a></td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Play-off_round"
title="2016–17 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>
<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>
@@ -111,11 +169,24 @@ meta:
<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="2016–17 UEFA Europa League">Europa League group stage</a></td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage"
title="2016–17 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>
<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>
@@ -124,11 +195,24 @@ meta:
<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="2016–17 UEFA Europa League">Europa League group stage</a></td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage"
title="2016–17 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>
<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>
@@ -137,11 +221,24 @@ meta:
<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="2016–17 UEFA Europa League">Europa League third qualifying round</a></td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Third_qualifying_round"
title="2016–17 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>
<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>
@@ -154,7 +251,13 @@ meta:
</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>
<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>
@@ -167,7 +270,13 @@ meta:
</tr>
<tr>
<th>10</th>
<td><a href="https://en.wikipedia.org/wiki/Chelsea_F.C." title="Chelsea F.C.">Chelsea</a></td>
<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>
@@ -180,7 +289,13 @@ meta:
</tr>
<tr>
<th>11</th>
<td><a href="https://en.wikipedia.org/wiki/Everton_F.C." title="Everton F.C.">Everton</a></td>
<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>
@@ -193,7 +308,13 @@ meta:
</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>
<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>
@@ -206,7 +327,13 @@ meta:
</tr>
<tr>
<th>13</th>
<td><a href="https://en.wikipedia.org/wiki/Watford_F.C." title="Watford F.C.">Watford</a></td>
<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>
@@ -219,7 +346,13 @@ meta:
</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>
<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>
@@ -232,7 +365,13 @@ meta:
</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>
<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>
@@ -245,7 +384,13 @@ meta:
</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>
<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>
@@ -258,7 +403,13 @@ meta:
</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>
<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>
@@ -271,7 +422,13 @@ meta:
</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>
<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>
@@ -281,11 +438,24 @@ meta:
<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="2016–17 Football League Championship">Football League Championship</a></td>
<td>
Relegation to the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
title="2016–17 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>
<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>
@@ -295,10 +465,24 @@ meta:
<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="2016–17 Football League Championship">Football League Championship</a></td> </tr>
<td>
Relegation to the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
title="2016–17 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>
<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>
@@ -308,39 +492,63 @@ meta:
<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="2016–17 Football League Championship">Football League Championship</a></td>
<td>
Relegation to the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
title="2016–17 Football League Championship"
>Football League Championship</a
>
</td>
</tr>
</tbody>
</table>
{% endcapture %}
{% capture table_colors %}
<table class="table is-bordered">
<tbody>
{% for color in site.data.colors.justColors %}
<tr>
<th class="is-{{ color }}">{{ color | capitalize }} th cell</th>
<td>Two</td>
<td class="is-{{ color }}">{{ color | capitalize }} td cell</td>
<td>Four</td>
<td>Five</td>
</tr>
<tr class="is-{{ color }}">
<th>{{ color | capitalize }} row</th>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endcapture %}
<div class="content">
<p>
You can create a <strong>Bulma table</strong> simply by attaching a single <code>table</code> CSS class on a <code>&lt;table&gt;</code> HTML element with the following structure:
You can create a <strong>Bulma table</strong> simply by attaching a single <code>table</code> CSS class on a
<code>&lt;table&gt;</code> HTML element with the following structure:
</p>
<ul>
<li>
<code>&lt;table class="table"&gt;</code> as the main <strong>container</strong>
<code>&lt;table class="table"&gt;</code> as 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>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>
<li><code>th</code> a table cell <strong>heading</strong></li>
<li><code>td</code> a table <strong>cell</strong></li>
</ul>
</li>
</ul>
@@ -349,13 +557,43 @@ meta:
</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>
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 docs/elements/snippet.html content=table_example horizontal=true
more=true
%}
{% include elements/anchor.html name="Modifiers" %}
{% include docs/elements/anchor.html name="Colors" %}
<div class="content">
<p>
You can change the color of a single <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> cell, or a whole
<code>&lt;tr&gt;</code> row, by adding one of the color modifiers:
</p>
<ul>
<li><code>is-primary</code></li>
<li><code>is-link</code></li>
<li><code>is-info</code></li>
<li><code>is-success</code></li>
<li><code>is-warning</code></li>
<li><code>is-danger</code></li>
<li><code>is-black</code></li>
<li><code>is-dark</code></li>
<li><code>is-light</code></li>
<li><code>is-white</code></li>
</ul>
</div>
{%
include docs/elements/snippet.html content=table_colors horizontal=true
more=true
%}
{% include docs/elements/anchor.html name="Modifiers" %}
{% capture scrollable_table %}
<div class="table-container">
@@ -367,14 +605,14 @@ meta:
{% capture simple_scrollable_table_example %}
<div class="table-container">
<table class="table is-bordered is-striped ">
<table class="table is-bordered is-striped">
<tbody>
{% for i in (1..5) %}
<tr>
{% for j in (1..100) %}
<td>{{ j | times: i }}</td>
{% endfor %}
</tr>
<tr>
{% for j in (1..100) %}
<td>{{ j | times: i }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
@@ -578,7 +816,9 @@ meta:
<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">
<table
class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth"
>
<thead>
<tr>
<th>One</th>
@@ -611,14 +851,18 @@ meta:
</div>
</div>
{% include elements/anchor.html name="Table container" %}
{% include docs/elements/anchor.html name="Table container" %}
<p class="content">
You can create a <strong>scrollable table</strong> by wrapping a <code>table</code> in a <code>table-container</code> element:
You can create a <strong>scrollable table</strong> by wrapping a <code>table</code> in a
<code>table-container</code> element:
</p>
{% highlight html %}{{ scrollable_table }}{% endhighlight %}
{% highlight html -%}
{{- scrollable_table -}}
{%- endhighlight %}
{{ simple_scrollable_table_example }}
{% include components/variables.html type='element' %}
{%
include docs/components/variables.html
type='element'
%}