mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
Base: Add test page for table
This commit is contained in:
parent
64c353f11c
commit
ba5e0607fd
124
Base/res/html/misc/display-table.html
Normal file
124
Base/res/html/misc/display-table.html
Normal file
|
@ -0,0 +1,124 @@
|
|||
<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>
|
Loading…
Reference in a new issue