rivendellweb pattern library

Table: No Borders 

<table class="table--no-borders">
    <thead>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
</table>
 
<table class="table--{{ name }}">
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
</table>
 
{
  "name": "no-borders"
}
  • Content: 
    table {
  table-layout: fixed;
  margin: 0 1.5rem;
  width: 100%;
}

table,
th,
tr,
td {
  border: 1px solid #000;
  border-collapse: collapse;
  padding: .5em;
}

.table--no-borders {
  border: none;
  border-collapse: collapse;
  padding: .5em;

  & th,
  & tr,
  & td {
    border: none;
  }
}

.table--centered {

  & th,
  & tr,
  & td {
    text-align: center;
  }
}

.table--cell-center {
  text-align: center;
}

.table--cell-left {
  text-align: left;
}

.table--cell-right {
  text-align: right;
}
  • URL: /components/raw/table/table.css
  • Filesystem Path: src/components/01-atoms/99-utils/table/table.css
  • Size: 507 Bytes

No notes defined.