ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: make table overflow:scroll

Browse source
This commit is contained in:
Ayo Ayco 2025-01-03 23:02:31 +01:00
parent 1c266d3d0c
commit 6e3dcc0098
1 changed files with 31 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/pages/tech-bsky-fedi.astro
View file

@ -73,31 +73,33 @@ const description =
<h2>Accounts ({accountObjects.length})</h2>
<table>
<tr>
<th>Avatar</th>
<th>Bsky</th>
<th>Fedi</th>
</tr>
{
accountObjects.map((account, index) => (
<tr>
<td>
<img
src={data[index].avatar}
alt={`${account.bskyHandle}'s avatar`}
/>
</td>
<td>
<span>{account.bskyHandle}</span>
</td>
<td>
<span>{account.fediHandle}</span>
</td>
</tr>
))
}
</table>
<div class="table-container">
<table>
<tr>
<th>Avatar</th>
<th>Bsky</th>
<th>Fedi</th>
</tr>
{
accountObjects.map((account, index) => (
<tr>
<td>
<img
src={data[index].avatar}
alt={`${account.bskyHandle}'s avatar`}
/>
</td>
<td>
<span>{account.bskyHandle}</span>
</td>
<td>
<span>{account.fediHandle}</span>
</td>
</tr>
))
}
</table>
</div>
<h2 id="how">How how how?</h2>
@ -129,6 +131,10 @@ const description =
td span {
font-size: small;
}
.table-container {
overflow: scroll;
}
table th,
table td {
padding: 0.5em;