Skip to content

Commit 8535cbf

Browse files
Merge pull request #76 from ShipFriend0516/feature/table-style
style: add table style
2 parents 87d6465 + 7fea208 commit 8535cbf

File tree

1 file changed

+66
-0
lines changed

1 file changed

+66
-0
lines changed

app/globals.css

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -296,3 +296,69 @@ article.post .image-description {
296296
.post-body li > code {
297297
font-weight: 300;
298298
}
299+
300+
/* Table Styles */
301+
article.post .post-body table {
302+
width: 100%;
303+
border-collapse: separate;
304+
border-spacing: 0;
305+
margin: 1.5em 0;
306+
border-radius: 0.375rem; /* rounded-md */
307+
overflow: hidden;
308+
box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
309+
}
310+
311+
article.post .post-body table thead {
312+
background-color: rgba(0, 100, 0, 0.1);
313+
font-weight: bold;
314+
}
315+
316+
.dark article.post .post-body table thead {
317+
background-color: rgba(100, 200, 100, 0.15);
318+
}
319+
320+
article.post .post-body table th,
321+
article.post .post-body table td {
322+
padding: 0.75em 1em;
323+
text-align: left;
324+
border: 1px solid #e0e0e0;
325+
}
326+
327+
.dark article.post .post-body table th,
328+
.dark article.post .post-body table td {
329+
border-color: rgba(255, 255, 255, 0.15);
330+
}
331+
332+
article.post .post-body table th {
333+
color: #006400;
334+
}
335+
336+
.dark article.post .post-body table th {
337+
color: #90ee90;
338+
}
339+
340+
article.post .post-body table tbody tr:hover {
341+
background-color: rgba(0, 100, 0, 0.03);
342+
}
343+
344+
.dark article.post .post-body table tbody tr:hover {
345+
background-color: rgba(100, 200, 100, 0.08);
346+
}
347+
348+
article.post .post-body table th:first-child,
349+
article.post .post-body table td:first-child {
350+
border-left: none;
351+
}
352+
353+
article.post .post-body table th:last-child,
354+
article.post .post-body table td:last-child {
355+
border-right: none;
356+
}
357+
358+
article.post .post-body table thead tr:first-child th {
359+
border-top: none;
360+
}
361+
362+
article.post .post-body table tbody tr:last-child td {
363+
border-bottom: none;
364+
}

0 commit comments

Comments
 (0)