popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

try to make sticky table headers (wip)

Browse Source
This commit is contained in:
Dobromir Popov
2024-11-16 23:36:28 +02:00
parent 3236286a2a
commit e67fb399cd
2 changed files with 18 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
pages/cart/reports/coverMe.tsx
View File

@ -142,14 +142,14 @@ export default function EventLogList() {
))}
</div>
<div className="mt-4 w-full overflow-x-auto">
<table className="w-full table-auto">
<thead>
<table className="w-full table-auto border-collapse">
<thead className="bg-gray-100">
<tr>
<th className="px-4 py-2 text-left">На</th>
<th className="px-4 py-2 text-left">От</th>
<th className="px-4 py-2 text-left">Дата</th>
<th className="px-4 py-2 text-left">Смяна</th>
<th className="px-4 py-2 text-left">Събитие</th>
<th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">На</th>
<th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">От</th>
<th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">Дата</th>
<th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">Смяна</th>
<th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">Събитие</th>
</tr>
</thead>
<tbody>

14
styles/styles.css
View File

@ -2,7 +2,9 @@
box-sizing: border-box;
} */
body {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
padding: 0 1rem 1rem 1rem;
max-width: 768px;
margin: 0 auto;
@ -119,7 +121,6 @@ iframe {
/* Add any additional styles you need */
}
.disabled {
opacity: 0.6;
pointer-events: none;
@ -185,7 +186,6 @@ iframe {
/* text-shadow: 0 0 2px rgba(252, 252, 252, 0.8); Adjust color and glow size as needed */
}
.mobile-calendar .rbc-btn-group button {
padding: 4px 6px; /* Smaller buttons */
font-size: 16px; /* Smaller button text */
@ -232,8 +232,7 @@ iframe {
cursor: pointer;
transition: all 0.3s;
} */
.rbc-calendar .rbc-month-view .rbc-event
{
.rbc-calendar .rbc-month-view .rbc-event {
padding: 2;
margin: 2;
background-color: transparent;
@ -246,14 +245,10 @@ iframe {
/* min-height:150px !important; * /
} */
.react-responsive-carousel .control-arrow {
width: 25%;
}
/* Custom CSS for responsive table */
@media (max-width: 768px) {
/* Hide table headers on small screens */
@ -291,4 +286,3 @@ iframe {
align-items: center;
justify-content: center; /* Optional: center buttons in the group */
}