turretcss

Table

Example

Table Caption
Vestibulum Sem Ipsum Dolor Fringilla Amet Mattis
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod

HTML

<table>...</table>

CSS

--table-margin: var(--paragraph-margin);
--table-background: var(--background);
--table-border-width: var(--border-width);
--table-border-style: var(--border-style);
--table-border-color: var(--border-color);
--table-border-radius: var(--border-radius);

Table Caption

Table Caption

HTML

<caption>...</caption>

CSS

--table-margin: var(--paragraph-margin);
--table-background: var(--background);
--table-border-width: var(--border-width);
--table-border-style: var(--border-style);
--table-border-color: var(--border-color);
--table-border-radius: var(--border-radius);

Table Head

Table Head

HTML

<th>...</th>

CSS

--table-head-padding: 0.5em;
--table-head-font-family: inherit;
--table-head-font-weight: inherit;
--table-head-font-size: inherit;
--table-head-color: inherit;
--table-head-text-align: left;
--table-head-text-transform: none;
--table-head-background: var(--light-50);
--table-head-border-width: var(--table-border-width);
--table-head-border-style: var(--table-border-style);
--table-head-border-color: var(--table-border-color);

Table Cell

Table Head

HTML

<td>...</td>

CSS

--table-cell-padding: 0.5em;
--table-cell-font-family: inherit;
--table-cell-font-weight: inherit;
--table-cell-font-size: inherit;
--table-cell-color: inherit;
--table-cell-line-height: var(--line-height);
--table-cell-vertical-align: middle;
--table-cell-border-width: var(--table-border-width);
--table-cell-border-style: var(--table-border-style);
--table-cell-border-color: var(--table-border-color);

Table Responsive

The .table-responsive class wraps a table allowing it to be sized appropriately for its contents, overflow content is viewable through scrolling.

Vestibulum Sem Ipsum Dolor Fringilla Amet Mattis
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod 
<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th scope="col">...</th>
        <th scope="col">...</th>
        <th scope="col">...</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Related