Skip to content

table.md

Latest commit

 

History

History
192 lines (139 loc) · 3.86 KB

table.md

File metadata and controls

192 lines (139 loc) · 3.86 KB

Table

bitch

Yes we have that too.

Helper Classes

.table-wrapper

tables may not be absolutely responsive depending on content. to allow horizontal scrolling without looking ugly, wrap yuh table in a div with this class

<div class="table-wrapper">
  <table>
    <!-- shet -->
  </table>
</div>

.table

Replicate a <table> element

<div class="table"></div>

.table-fixed

add to <table> or .table element if you want it to be abso-fucking-lutely mushy

.table-row

Replicate a <thead>,<tbody>,<tfoot> or <tr> element

<div class="table">
  <div class="table-row"></div>
</div>

.table-bordered

add to <table> or .table or even <td> or .table-cell add borders to columns

.table-row

Replicate a <thead>,<tbody>,<tfoot> or <tr> element

<div class="table">
  <div class="table-row"></div>
</div>

Row classes

Yes

Colors

The folloing classes style table rows to framework colors

  • .table-row-primary
  • .table-row-secondary
  • .table-row-accent
  • .table-row-neutral
  • .table-row-success
  • .table-row-caution
  • .table-row-error
  • .table-row-intensity-1
  • .table-row-intensity-2
  • .table-row-intensity-3
  • .table-row-intensity-4
  • .table-row-intensity-5
<table>
  <tr class="table-row table-row-success"></tr>
</table>

Cell classes

Yes

Colors

The following classes style a single table cell to framework colors

  • .table-cell-primary
  • .table-cell-secondary
  • .table-cell-accent
  • .table-cell-neutral
  • .table-cell-success
  • .table-cell-caution
  • .table-cell-error
  • .table-cell-intensity-1
  • .table-cell-intensity-2
  • .table-cell-intensity-3
  • .table-cell-intensity-4
  • .table-cell-intensity-5
<table>
  <tr class="table-row">
    <td class=" table-row-succes">weeee</td>
  </tr>
</table>
Disable

To add disabled styles to a row, add .table-row-disabled to the row

.table-cell

Replicate a <td> or <tr> element

<div class="table">
  <div class="table-row">
    <div class="table-cell">CELL!</div>
  </div>
</div>

.table-cell-heading

Style a <td> or .table-cell as a <tr> element

<div class="table">
  <div class="table-row">
    <div class="table-cell table-cell-heading">CELL!</div>
  </div>
  <div class="table-row">
    <div class="table-cell">CELL!</div>
  </div>
</div>

.table-cell-no-gutter

DEPRECATED use no-padding- instead

Remove padding on table cell

<div class="table-cell table-cell-no-gutter">CELL!</div>

.table-expanded, .table-compact and table-constricted

Add .table-expanded, .table-compact or .table-constricted on the table element to expand, reduce, or remove/reset padding or line height

.table-label

Yes

Add tags on the side for more secondary. Works best with a cell classed ass .table-cell-no-gutter.

This can be colorized with .table-label-[color] based on framework colors

<table class="table">
  <tbody>
    <tr>
      <td class="table-cell-no-gutter">
        <span class="table-label table-label-primary"></span>
      </td>
    </tr>
  </tbody>
</table>

Custom color labels can be added to by setting background color properties instead of color classes

<table class="table">
  <tbody>
    <tr>
      <td class="table-cell-no-gutter">
        <span class="table-label" style="background-color:red;"></span>
      </td>
    </tr>
  </tbody>
</table>

Back to TOC