daisyui/components/table.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.7.17 - MIT License */ @layer utilities{@layer daisyui.l1.l2.l3{.table{border-collapse:separate;--tw-border-spacing-x:0px;--tw-border-spacing-y:0px;width:100%;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-radius:var(--radius-box);text-align:left;font-size:.875rem;position:relative}.table:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}@media (hover:hover){:is(:is(.table tr.row-hover),.table tr.row-hover:nth-child(2n)):hover{background-color:var(--color-base-200)}}.table :where(th,td){vertical-align:middle;padding-block:.75rem;padding-inline:1rem}.table :where(thead,tfoot){white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);font-size:.875rem;font-weight:600}.table :where(tfoot tr:first-child :is(td,th)){border-top:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}.table :where(.table-pin-rows thead){z-index:1;position:sticky;top:0}.table :where(.table-pin-rows tfoot){z-index:1;position:sticky;bottom:0}.table :where(.table-pin-rows :is(thead,tfoot) tr){background-color:var(--color-base-100)}.table :where(.table-pin-cols tr th){background-color:var(--color-base-100);position:sticky;left:0;right:0}.table :where(thead tr :is(td,th),tbody tr:not(:last-child) :is(td,th)){border-bottom:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}}@layer daisyui.l1.l2{.table-zebra tbody tr:where(:nth-child(2n)){background-color:var(--color-base-200);& :where(.table-pin-cols tr th){background-color:var(--color-base-200)}}@media (hover:hover){:is(:is(.table-zebra tbody tr.row-hover),.table-zebra tbody tr.row-hover:where(:nth-child(2n))):hover{background-color:var(--color-base-300)}}.table-xs :not(thead,tfoot) tr{font-size:.6875rem}.table-xs :where(th,td){padding-block:.25rem;padding-inline:.5rem}.table-sm :not(thead,tfoot) tr{font-size:.75rem}.table-sm :where(th,td){padding-block:.5rem;padding-inline:.75rem}.table-md :not(thead,tfoot) tr{font-size:.875rem}.table-md :where(th,td){padding-block:.75rem;padding-inline:1rem}.table-lg :not(thead,tfoot) tr{font-size:1.125rem}.table-lg :where(th,td){padding-block:1rem;padding-inline:1.25rem}.table-xl :not(thead,tfoot) tr{font-size:1.375rem}.table-xl :where(th,td){padding-block:1.25rem;padding-inline:1.5rem}}@media (width>=640px){@layer daisyui.l1.l2.l3{.sm\:table{border-collapse:separate;--tw-border-spacing-x:0px;--tw-border-spacing-y:0px;width:100%;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-radius:var(--radius-box);text-align:left;font-size:.875rem;position:relative}.sm\:table:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}@media (hover:hover){:is(:is(.table tr.row-hover),.table tr.row-hover:nth-child(2n)):hover{background-color:var(--color-base-200)}}.sm\:table :where(th,td){vertical-align:middle;padding-block:.75rem;padding-inline:1rem}.sm\:table :where(thead,tfoot){white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);font-size:.875rem;font-weight:600}.sm\:table :where(tfoot tr:first-child :is(td,th)){border-top:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}.sm\:table :where(.table-pin-rows thead){z-index:1;position:sticky;top:0}.sm\:table :where(.table-pin-rows tfoot){z-index:1;position:sticky;bottom:0}.sm\:table :where(.table-pin-rows :is(thead,tfoot) tr){background-color:var(--color-base-100)}.sm\:table :where(.table-pin-cols tr th){background-color:var(--color-base-100);position:sticky;left:0;right:0}.sm\:table :where(thead tr :is(td,th),tbody tr:not(:last-child) :is(td,th)){border-bottom:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}}@layer daisyui.l1.l2{.sm\:table-zebra tbody tr:where(:nth-child(2n)){background-color:var(--color-base-200);& :where(.table-pin-cols tr th){background-color:var(--color-base-200)}}@media (hover:hover){:is(:is(.table-zebra tbody tr.row-hover),.table-zebra tbody tr.row-hover:where(:nth-child(2n))):hover{background-color:var(--color-base-300)}}.sm\:table-xs :not(thead,tfoot) tr{font-size:.6875rem}.sm\:table-xs :where(th,td){padding-block:.25rem;padding-inline:.5rem}.sm\:table-sm :not(thead,tfoot) tr{font-size:.75rem}.sm\:table-sm :where(th,td){padding-block:.5rem;padding-inline:.75rem}.sm\:table-md :not(thead,tfoot) tr{font-size:.875rem}.sm\:table-md :where(th,td){padding-block:.75rem;padding-inline:1rem}.sm\:table-lg :not(thead,tfoot) tr{font-size:1.125rem}.sm\:table-lg :where(th,td){padding-block:1rem;padding-inline:1.25rem}.sm\:table-xl :not(thead,tfoot) tr{font-size:1.375rem}.sm\:table-xl :where(th,td){padding-block:1.25rem;padding-inline:1.5rem}}}@media (width>=768px){@layer daisyui.l1.l2.l3{.md\:table{border-collapse:separate;--tw-border-spacing-x:0px;--tw-border-spacing-y:0px;width:100%;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-radius:var(--radius-box);text-align:left;font-size:.875rem;position:relative}.md\:table:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}@media (hover:hover){:is(:is(.table tr.row-hover),.table tr.row-hover:nth-child(2n)):hover{background-color:var(--color-base-200)}}.md\:table :where(th,td){vertical-align:middle;padding-block:.75rem;padding-inline:1rem}.md\:table :where(thead,tfoot){white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);font-size:.875rem;font-weight:600}.md\:table :where(tfoot tr:first-child :is(td,th)){border-top:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}.md\:table :where(.table-pin-rows thead){z-index:1;position:sticky;top:0}.md\:table :where(.table-pin-rows tfoot){z-index:1;position:sticky;bottom:0}.md\:table :where(.table-pin-rows :is(thead,tfoot) tr){background-color:var(--color-base-100)}.md\:table :where(.table-pin-cols tr th){background-color:var(--color-base-100);position:sticky;left:0;right:0}.md\:table :where(thead tr :is(td,th),tbody tr:not(:last-child) :is(td,th)){border-bottom:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}}@layer daisyui.l1.l2{.md\:table-zebra tbody tr:where(:nth-child(2n)){background-color:var(--color-base-200);& :where(.table-pin-cols tr th){background-color:var(--color-base-200)}}@media (hover:hover){:is(:is(.table-zebra tbody tr.row-hover),.table-zebra tbody tr.row-hover:where(:nth-child(2n))):hover{background-color:var(--color-base-300)}}.md\:table-xs :not(thead,tfoot) tr{font-size:.6875rem}.md\:table-xs :where(th,td){padding-block:.25rem;padding-inline:.5rem}.md\:table-sm :not(thead,tfoot) tr{font-size:.75rem}.md\:table-sm :where(th,td){padding-block:.5rem;padding-inline:.75rem}.md\:table-md :not(thead,tfoot) tr{font-size:.875rem}.md\:table-md :where(th,td){padding-block:.75rem;padding-inline:1rem}.md\:table-lg :not(thead,tfoot) tr{font-size:1.125rem}.md\:table-lg :where(th,td){padding-block:1rem;padding-inline:1.25rem}.md\:table-xl :not(thead,tfoot) tr{font-size:1.375rem}.md\:table-xl :where(th,td){padding-block:1.25rem;padding-inline:1.5rem}}}@media (width>=1024px){@layer daisyui.l1.l2.l3{.lg\:table{border-collapse:separate;--tw-border-spacing-x:0px;--tw-border-spacing-y:0px;width:100%;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-radius:var(--radius-box);text-align:left;font-size:.875rem;position:relative}.lg\:table:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}@media (hover:hover){:is(:is(.table tr.row-hover),.table tr.row-hover:nth-child(2n)):hover{background-color:var(--color-base-200)}}.lg\:table :where(th,td){vertical-align:middle;padding-block:.75rem;padding-inline:1rem}.lg\:table :where(thead,tfoot){white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);font-size:.875rem;font-weight:600}.lg\:table :where(tfoot tr:first-child :is(td,th)){border-top:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}.lg\:table :where(.table-pin-rows thead){z-index:1;position:sticky;top:0}.lg\:table :where(.table-pin-rows tfoot){z-index:1;position:sticky;bottom:0}.lg\:table :where(.table-pin-rows :is(thead,tfoot) tr){background-color:var(--color-base-100)}.lg\:table :where(.table-pin-cols tr th){background-color:var(--color-base-100);position:sticky;left:0;right:0}.lg\:table :where(thead tr :is(td,th),tbody tr:not(:last-child) :is(td,th)){border-bottom:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}}@layer daisyui.l1.l2{.lg\:table-zebra tbody tr:where(:nth-child(2n)){background-color:var(--color-base-200);& :where(.table-pin-cols tr th){background-color:var(--color-base-200)}}@media (hover:hover){:is(:is(.table-zebra tbody tr.row-hover),.table-zebra tbody tr.row-hover:where(:nth-child(2n))):hover{background-color:var(--color-base-300)}}.lg\:table-xs :not(thead,tfoot) tr{font-size:.6875rem}.lg\:table-xs :where(th,td){padding-block:.25rem;padding-inline:.5rem}.lg\:table-sm :not(thead,tfoot) tr{font-size:.75rem}.lg\:table-sm :where(th,td){padding-block:.5rem;padding-inline:.75rem}.lg\:table-md :not(thead,tfoot) tr{font-size:.875rem}.lg\:table-md :where(th,td){padding-block:.75rem;padding-inline:1rem}.lg\:table-lg :not(thead,tfoot) tr{font-size:1.125rem}.lg\:table-lg :where(th,td){padding-block:1rem;padding-inline:1.25rem}.lg\:table-xl :not(thead,tfoot) tr{font-size:1.375rem}.lg\:table-xl :where(th,td){padding-block:1.25rem;padding-inline:1.5rem}}}@media (width>=1280px){@layer daisyui.l1.l2.l3{.xl\:table{border-collapse:separate;--tw-border-spacing-x:0px;--tw-border-spacing-y:0px;width:100%;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-radius:var(--radius-box);text-align:left;font-size:.875rem;position:relative}.xl\:table:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}@media (hover:hover){:is(:is(.table tr.row-hover),.table tr.row-hover:nth-child(2n)):hover{background-color:var(--color-base-200)}}.xl\:table :where(th,td){vertical-align:middle;padding-block:.75rem;padding-inline:1rem}.xl\:table :where(thead,tfoot){white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);font-size:.875rem;font-weight:600}.xl\:table :where(tfoot tr:first-child :is(td,th)){border-top:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}.xl\:table :where(.table-pin-rows thead){z-index:1;position:sticky;top:0}.xl\:table :where(.table-pin-rows tfoot){z-index:1;position:sticky;bottom:0}.xl\:table :where(.table-pin-rows :is(thead,tfoot) tr){background-color:var(--color-base-100)}.xl\:table :where(.table-pin-cols tr th){background-color:var(--color-base-100);position:sticky;left:0;right:0}.xl\:table :where(thead tr :is(td,th),tbody tr:not(:last-child) :is(td,th)){border-bottom:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}}@layer daisyui.l1.l2{.xl\:table-zebra tbody tr:where(:nth-child(2n)){background-color:var(--color-base-200);& :where(.table-pin-cols tr th){background-color:var(--color-base-200)}}@media (hover:hover){:is(:is(.table-zebra tbody tr.row-hover),.table-zebra tbody tr.row-hover:where(:nth-child(2n))):hover{background-color:var(--color-base-300)}}.xl\:table-xs :not(thead,tfoot) tr{font-size:.6875rem}.xl\:table-xs :where(th,td){padding-block:.25rem;padding-inline:.5rem}.xl\:table-sm :not(thead,tfoot) tr{font-size:.75rem}.xl\:table-sm :where(th,td){padding-block:.5rem;padding-inline:.75rem}.xl\:table-md :not(thead,tfoot) tr{font-size:.875rem}.xl\:table-md :where(th,td){padding-block:.75rem;padding-inline:1rem}.xl\:table-lg :not(thead,tfoot) tr{font-size:1.125rem}.xl\:table-lg :where(th,td){padding-block:1rem;padding-inline:1.25rem}.xl\:table-xl :not(thead,tfoot) tr{font-size:1.375rem}.xl\:table-xl :where(th,td){padding-block:1.25rem;padding-inline:1.5rem}}}@media (width>=1536px){@layer daisyui.l1.l2.l3{.\32 xl\:table{border-collapse:separate;--tw-border-spacing-x:0px;--tw-border-spacing-y:0px;width:100%;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-radius:var(--radius-box);text-align:left;font-size:.875rem;position:relative}.\32 xl\:table:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}@media (hover:hover){:is(:is(.table tr.row-hover),.table tr.row-hover:nth-child(2n)):hover{background-color:var(--color-base-200)}}.\32 xl\:table :where(th,td){vertical-align:middle;padding-block:.75rem;padding-inline:1rem}.\32 xl\:table :where(thead,tfoot){white-space:nowrap;color:color-mix(in oklab, var(--color-base-content) 60%, transparent);font-size:.875rem;font-weight:600}.\32 xl\:table :where(tfoot tr:first-child :is(td,th)){border-top:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}.\32 xl\:table :where(.table-pin-rows thead){z-index:1;position:sticky;top:0}.\32 xl\:table :where(.table-pin-rows tfoot){z-index:1;position:sticky;bottom:0}.\32 xl\:table :where(.table-pin-rows :is(thead,tfoot) tr){background-color:var(--color-base-100)}.\32 xl\:table :where(.table-pin-cols tr th){background-color:var(--color-base-100);position:sticky;left:0;right:0}.\32 xl\:table :where(thead tr :is(td,th),tbody tr:not(:last-child) :is(td,th)){border-bottom:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}}@layer daisyui.l1.l2{.\32 xl\:table-zebra tbody tr:where(:nth-child(2n)){background-color:var(--color-base-200);& :where(.table-pin-cols tr th){background-color:var(--color-base-200)}}@media (hover:hover){:is(:is(.table-zebra tbody tr.row-hover),.table-zebra tbody tr.row-hover:where(:nth-child(2n))):hover{background-color:var(--color-base-300)}}.\32 xl\:table-xs :not(thead,tfoot) tr{font-size:.6875rem}.\32 xl\:table-xs :where(th,td){padding-block:.25rem;padding-inline:.5rem}.\32 xl\:table-sm :not(thead,tfoot) tr{font-size:.75rem}.\32 xl\:table-sm :where(th,td){padding-block:.5rem;padding-inline:.75rem}.\32 xl\:table-md :not(thead,tfoot) tr{font-size:.875rem}.\32 xl\:table-md :where(th,td){padding-block:.75rem;padding-inline:1rem}.\32 xl\:table-lg :not(thead,tfoot) tr{font-size:1.125rem}.\32 xl\:table-lg :where(th,td){padding-block:1rem;padding-inline:1.25rem}.\32 xl\:table-xl :not(thead,tfoot) tr{font-size:1.375rem}.\32 xl\:table-xl :where(th,td){padding-block:1.25rem;padding-inline:1.5rem}}}}