daisyui/components/table.css

daisyUI 5 - The Tailwind CSS Component Library

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