Tables
Tables
This is a way to show tabular data.
Zebra Stripes
Table rows should alternate between white and light gray. When hovered over, it should turn to a light teal with a gray underline.
Request | Request For | Date Received | Room | Service Needed | Category | Due Date |
---|---|---|---|---|---|---|
987654321-987654321 | Patricia Graca | Dec 1, 2019 | AGA | AGA-404 | Move | Dec 1, 2019 |
987654321-987654321 | Kurt Von Koch | Jan 15, 2020 | AGA | AGA-404 | HVAC | Jan 15, 2020 |
987654321-987654321 | John Smith | Oct 5, 2020 | NA01 | 1-113 | Move | Oct 5, 2020 |
987654321-987654321 | John Smith | Oct 5, 2020 | AGA | AGA-404 | Move | Oct 5, 2020 |
987654321-987654321 | Patricia Graca | Dec 1, 2019 | NA01 | 1-113 | Plumbing | Dec 1, 2019 |
987654321-987654321 | John Smith | Oct 5, 2020 | NA01 | 1-113 | Lighting | Oct 5, 2020 |
<table class="table table-striped table-hover table-borderless">
<thead class="thead-light">
<tr>
<th scope="col">Request</th>
<th scope="col">Request For</th>
<th scope="col">Date Received</th>
<th scope="col">Room</th>
<th scope="col">Service Needed</th>
<th scope="col">Category</th>
<th scope="col">Due Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>987654321-987654321</td>
<td>Patricia Graca</td>
<td>Dec 1, 2019</td>
<td>AGA</td>
<td>AGA-404</td>
<td>Move</td>
<td>Dec 1, 2019</td>
</tr>
<tr>
<td>987654321-987654321</td>
<td>Kurt Von Koch</td>
<td>Jan 15, 2020</td>
<td>AGA</td>
<td>AGA-404</td>
<td>HVAC</td>
<td>Jan 15, 2020</td>
</tr>
<tr>
<td>987654321-987654321</td>
<td>John Smith</td>
<td>Oct 5, 2020</td>
<td>NA01</td>
<td>1-113</td>
<td>Move</td>
<td>Oct 5, 2020</td>
</tr>
<tr>
<td>987654321-987654321</td>
<td>John Smith</td>
<td>Oct 5, 2020</td>
<td>AGA</td>
<td>AGA-404</td>
<td>Move</td>
<td>Oct 5, 2020</td>
</tr>
<tr>
<td>987654321-987654321</td>
<td>Patricia Graca</td>
<td>Dec 1, 2019</td>
<td>NA01</td>
<td>1-113</td>
<td>Plumbing</td>
<td>Dec 1, 2019</td>
</tr>
<tr>
<td>987654321-987654321</td>
<td>John Smith</td>
<td>Oct 5, 2020</td>
<td>NA01</td>
<td>1-113</td>
<td>Lighting</td>
<td>Oct 5, 2020</td>
</tr>
</tbody>
</table>