UI: Components
Table
Table is a collection of modifier-classes to enhance the appearance of tables, using the native <table>
, <thead>
, <tbody>
, <tr>
, <th>
, <td>
, <colgroup>
and <col>
HTML elements.
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |
With opposite color-scheme
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |
With right-to-left
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |
Variants
With --hover-all
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |
With --rounded
, --hover-col
and --hover-td
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |
With --split-cols
, --th-dark
, --hover-tr
and --hover-td
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |
With --rounded
added as well.
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |
With --split-rows
, --th-light
, --hover-tr
and --hover-td-outline
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |
With --rounded
added as well.
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |
With --block-border
, --th-light
and --hover-tr
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |
With --zebracol-even
and --hover-tr-outline
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |
With --zebracol-odd
and --hover-col-outline
.
This requires border-collpase: collapse
and will not work with split cols or rows.
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |
With --zebrarow-even
and --hover-td-outline
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |
With --zebrarow-odd
and --hover-col-outline
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |
With --zebrarow-even
, --no-border
and --hover-tr-outline
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |
With --block-border
, --hover-col
and column-alignment:
data-col-2="center" data-col-4="end"
First Name | Last Name | Known As | Place |
Bruce | Wayne | Batman | Gotham City |
Clark | Kent | Superman | Metropolis |
Tony | Stark | Iron Man | Malibu |
Peter | Parker | Spider-Man | New York City |
Matt | Murdock | Daredevil | New York City |