mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
125 lines
2.8 KiB
HTML
125 lines
2.8 KiB
HTML
<style>
|
|
p {
|
|
margin-bottom: .5rem;
|
|
color: #808080;
|
|
}
|
|
|
|
.border-black {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.thick-border-black {
|
|
border: 10px solid black;
|
|
}
|
|
|
|
.table-border-black, table.table-border-black tr, table.table-border-black td {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.table {
|
|
display: table;
|
|
}
|
|
|
|
.table-row {
|
|
display: table-row;
|
|
}
|
|
|
|
.table-cell {
|
|
display: table-cell;
|
|
}
|
|
</style>
|
|
|
|
<!-- Copied from html tests Userland/Libraries/LibWeb/Tests/Pages/Table.html -->
|
|
<p>Empty table</p>
|
|
<table id="empty-table"></table>
|
|
|
|
<!-- Copied from html tests Userland/Libraries/LibWeb/Tests/Pages/Table.html -->
|
|
<p>Full table</p>
|
|
<table id="full-table">
|
|
<caption>
|
|
A Caption
|
|
</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Head Cell</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Body Cell</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td>Footer Cell</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
|
|
<p>Table with 2 columns and border</p>
|
|
<table class="table-border-black">
|
|
<tr>
|
|
<th>Firstname</th>
|
|
<th>Lastname</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Peter</td>
|
|
<td>Griffin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Lois</td>
|
|
<td>Griffin</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Border-collapse and hidden -->
|
|
<p>No borders</p>
|
|
<table class="table-border-black" style="border-collapse: collapse; border-style: hidden;">
|
|
<tr>
|
|
<th>Firstname</th>
|
|
<th>Lastname</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Peter</td>
|
|
<td>Griffin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Lois</td>
|
|
<td>Griffin</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Border-collapse and hidden with divs -->
|
|
<p>No borders v2</p>
|
|
<div class="table border-black" style="border-collapse: collapse; border-style: hidden;">
|
|
<div class="table-row border-black">
|
|
<div class="table-cell border-black">Firstname</div>
|
|
<div class="table-cell border-black">Lastname</div>
|
|
</div>
|
|
<div class="table-row border-black">
|
|
<div class="table-cell border-black">Peter</div>
|
|
<div class="table-cell border-black">Griffin</div>
|
|
</div>
|
|
<div class="table-row border-black">
|
|
<div class="table-cell border-black">Lois</div>
|
|
<div class="table-cell border-black">Griffin</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Border-collapse and hidden with divs -->
|
|
<p>Columns should be tightly packed with no overflows nor extra space</p>
|
|
<div class="table thick-border-black" style="border-collapse: collapse; border-style: hidden;">
|
|
<div class="table-row thick-border-black">
|
|
<div class="table-cell thick-border-black">Firstname</div>
|
|
<div class="table-cell thick-border-black">Lastname</div>
|
|
</div>
|
|
<div class="table-row thick-border-black">
|
|
<div class="table-cell thick-border-black">Peter</div>
|
|
<div class="table-cell thick-border-black">Griffin</div>
|
|
</div>
|
|
<div class="table-row thick-border-black">
|
|
<div class="table-cell thick-border-black">Lois</div>
|
|
<div class="table-cell thick-border-black">Griffin</div>
|
|
</div>
|
|
</div>
|