RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 12:07:45 +00:00
Code Issues Activity Actions

Base: Add test page for table

Browse source
This commit is contained in:
martinfalisse 2023-01-02 23:04:18 +01:00 • committed by Andreas Kling
parent 64c353f11c
commit ba5e0607fd
1 changed files with 124 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

124
Base/res/html/misc/display-table.html Normal file
View 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>