mirror of
https://github.com/papercss/papercss
synced 2024-06-16 04:35:37 +02:00
140 lines
2.3 KiB
Markdown
140 lines
2.3 KiB
Markdown
|
---
|
||
|
title: Tables
|
||
|
---
|
||
|
### Regular
|
||
|
|
||
|
<table>
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th>#</th>
|
||
|
<th>Name</th>
|
||
|
<th>Position</th>
|
||
|
<th>Location</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<td>1</td>
|
||
|
<td>Bob Dylan</td>
|
||
|
<td>Musician</td>
|
||
|
<td>California, USA</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>2</td>
|
||
|
<td>Eric Clapton</td>
|
||
|
<td>Musician</td>
|
||
|
<td>Ohio, USA</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>3</td>
|
||
|
<td>Daniel Kahneman</td>
|
||
|
<td>Psychologist</td>
|
||
|
<td>California, USA</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
|
||
|
### Hover
|
||
|
|
||
|
<table class="table-hover">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th>#</th>
|
||
|
<th>Name</th>
|
||
|
<th>Position</th>
|
||
|
<th>Location</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<td>1</td>
|
||
|
<td>Bob Dylan</td>
|
||
|
<td>Musician</td>
|
||
|
<td>California, USA</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>2</td>
|
||
|
<td>Eric Clapton</td>
|
||
|
<td>Musician</td>
|
||
|
<td>Ohio, USA</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>3</td>
|
||
|
<td>Daniel Kahneman</td>
|
||
|
<td>Psychologist</td>
|
||
|
<td>California, USA</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
|
||
|
### Alternating
|
||
|
|
||
|
<table class="table-alternating">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th>#</th>
|
||
|
<th>Name</th>
|
||
|
<th>Position</th>
|
||
|
<th>Location</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<td>1</td>
|
||
|
<td>Bob Dylan</td>
|
||
|
<td>Musician</td>
|
||
|
<td>California, USA</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>2</td>
|
||
|
<td>Eric Clapton</td>
|
||
|
<td>Musician</td>
|
||
|
<td>Ohio, USA</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>3</td>
|
||
|
<td>Daniel Kahneman</td>
|
||
|
<td>Psychologist</td>
|
||
|
<td>California, USA</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
|
||
|
#### Code:
|
||
|
```html
|
||
|
<table>
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th>#</th>
|
||
|
<th>Name</th>
|
||
|
<th>Position</th>
|
||
|
<th>Location</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<td>1</td>
|
||
|
<td>Bob Dylan</td>
|
||
|
<td>Musician</td>
|
||
|
<td>California, USA</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>2</td>
|
||
|
<td>Eric Clapton</td>
|
||
|
<td>Musician</td>
|
||
|
<td>Ohio, USA</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>3</td>
|
||
|
<td>Daniel Kahneman</td>
|
||
|
<td>Psychologist</td>
|
||
|
<td>California, USA</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
|
||
|
<!-- Add table-hover or table-alternating to change the style of the table -->
|
||
|
<table class="table-hover">
|
||
|
<table class="table-alternating">
|
||
|
```
|