mirror of
https://github.com/jgthms/bulma
synced 2026-03-17 19:04:30 -07:00
Add tags
This commit is contained in:
Jeremy Thomas
@@ -2,57 +2,41 @@
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: table
|
||||
variables:
|
||||
- name: $table-color
|
||||
value: $grey-darker
|
||||
- name: $table-background-color
|
||||
value: $white
|
||||
- name: $table-cell-border
|
||||
value: 1px solid $grey-lighter
|
||||
- name: $table-cell-border-width
|
||||
value: 0 0 1px
|
||||
- name: $table-cell-padding
|
||||
value: 0.5em 0.75em
|
||||
- name: $table-cell-heading-color
|
||||
value: $text-strong
|
||||
- name: $table-head-color
|
||||
value: $grey
|
||||
- name: $table-head-cell-border-width
|
||||
value: 0 0 2px
|
||||
- name: $table-head-cell-color
|
||||
value: $text-strong
|
||||
- name: $table-foot-cell-border-width
|
||||
value: 2px 0 0
|
||||
- name: $table-foot-cell-color
|
||||
value: $text-strong
|
||||
- name: $table-row-hover-background-color
|
||||
value: $white-bis
|
||||
- name: $table-row-active-background-color
|
||||
value: $primary
|
||||
- name: $table-row-active-color
|
||||
value: $primary-invert
|
||||
- name: $table-striped-row-even-background-color
|
||||
value: $white-bis
|
||||
- name: $table-striped-row-even-hover-background-color
|
||||
value: $white-ter
|
||||
---
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Tables</h1>
|
||||
<h2 class="subtitle">The inevitable HTML <strong>table</strong>, with special case cells</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>You simply need to attach a single <code>.table</code> CSS class on a <code><table></code> with the following structure:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>table</code>
|
||||
<ul>
|
||||
<li>
|
||||
<code>thead</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>tfoot</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>tbody</code>
|
||||
<ul>
|
||||
<li>
|
||||
<code>tr</code>
|
||||
<ul>
|
||||
<li>
|
||||
<code>th</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>td</code>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
<span class="tag is-info">0.4.2</span>
|
||||
</p>
|
||||
<p>
|
||||
You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code><tr></code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% capture table_example %}
|
||||
<table class="table">
|
||||
<thead>
|
||||
@@ -353,13 +337,60 @@ doc-subtab: table
|
||||
</table>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="example">
|
||||
{{table_example}}
|
||||
</div>
|
||||
{% include subnav-elements.html %}
|
||||
|
||||
{% highlight html %}
|
||||
{{table_example}}
|
||||
{% endhighlight %}
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Tables</h1>
|
||||
<h2 class="subtitle">The inevitable HTML <strong>table</strong>, with special case cells</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>You simply need to attach a single <code>.table</code> CSS class on a <code><table></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>
|
||||
<span class="tag is-success">New!</span>
|
||||
<span class="tag is-info">0.4.2</span>
|
||||
</p>
|
||||
<p>
|
||||
You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code><tr></code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
{{table_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{table_example}}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
@@ -474,13 +505,13 @@ doc-subtab: table
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>You can <strong>combine</strong> all three modifiers.</p>
|
||||
<p>You can have a <strong>fullwidth</strong> table.</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<code>table is-bordered is-striped is-narrow</code>
|
||||
<code>table is-fullwidth</code>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<table class="table is-bordered is-striped is-narrow">
|
||||
<table class="table is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>One</th>
|
||||
@@ -512,5 +543,49 @@ doc-subtab: table
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>You can <strong>combine</strong> all four modifiers.</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<code>table is-bordered is-striped is-narrow is-fullwidth</code>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<table class="table is-bordered is-striped is-narrow 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 variables.html element=true %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user