library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add long table example

Browse Source
This commit is contained in:
Jeremy Thomas 2019-07-25 09:55:58 +01:00
parent 8d08f243b7
commit 0f43e2d701
1 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -354,10 +354,26 @@ meta:
{% include elements/anchor.html name="Modifiers" %}
{% capture simple_scrollable_table_example %}
{% capture scrollable_table %}
<div class="table-container">
<table class="table">
<!-- This is a scrollable table -->
<!-- Your table content -->
</table>
</div>
{% endcapture %}
{% capture simple_scrollable_table_example %}
<div class="table-container">
<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>
{% endfor %}
</tbody>
</table>
</div>
{% endcapture %}
@ -592,16 +608,14 @@ meta:
</div>
</div>
{% include elements/anchor.html name="Table container" %}
<div class="message is-info">
<div class="message-body">
<p class="content">
You can create a <strong>scrollable table</strong> by wrapping
a <code>table</code> in the <code>table-container</code> class:
</p>
{% highlight html %}{{ simple_scrollable_table_example }}{% endhighlight %}
</div>
</div>
<p class="content">
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 %}
{{ simple_scrollable_table_example }}
{% include elements/variables.html type='element' %}