kazhnuz/mouette
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

feat: add table support

Browse source
This commit is contained in:
Kazhnuz 2024-09-10 23:39:47 +02:00
parent 2418a617e0
commit 9cdb051157
4 changed files with 80 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
index.html
View file

@ -83,7 +83,7 @@
<form action="#">
<input type="submit" value="Submit">
</form>
<table border="1" cellspacing="0" cellpadding="5">
<table class="centered">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
@ -95,6 +95,44 @@
<td>Row 2, Column 3</td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<th>Row 1, Column 1</th>
<th>Row 1, Column 2</th>
<th>Row 1, Column 3</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
<table>
<thead>
<tr>
<th>Row 1, Column 1</th>
<th>Row 1, Column 2</th>
<th>Row 1, Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
</table>
<img src="https://via.placeholder.com/800x600/" alt="">
<nav>
<ul class="menu">

3
src/_typography.scss
View file

@ -6,7 +6,8 @@ h4,
h5,
h6,
ul,
ol {
ol,
table {
padding: 0;
margin: 0 0 1rem 0;
}

37
src/components/_tables.scss Normal file
View file

@ -0,0 +1,37 @@
table {
border-collapse: separate;
width:100%;
border:0;
border-spacing: 3px;
}
table.centered th, table.centered td {
text-align: center;
}
tr, th, td {
border:0;
}
th, td {
background-color: var(--color-background-alt);
padding:.33rem .66rem;
}
table:not(:has(thead)) tr:first-child, table > tr:first-child, table thead tr:first-child {
td:first-child, th:first-child {
border-top-left-radius: var(--well-radius);
}
td:last-child, th:last-child {
border-top-right-radius: var(--well-radius);
}
}
table > tr:last-child, table tbody tr:last-child {
td:first-child, th:first-child {
border-bottom-left-radius: var(--well-radius);
}
td:last-child, th:last-child {
border-bottom-right-radius: var(--well-radius);
}
}

1
src/main.scss
View file

@ -28,3 +28,4 @@
@import 'components/well';
@import 'components/buttons';
@import 'components/menus';
@import 'components/tables';