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