.wp-block-table { --table-tint-1: color-mix(in srgb, var(--color-text) 3.5%, var(--color-content-bg)); --table-tint-2: color-mix(in srgb, var(--color-text) 6%, var(--color-content-bg)); display: block; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; border: 1px solid var(--color-border); border-radius: var(--radius-m); } .wp-block-table:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .wp-block-table td, .wp-block-table th { font-variant-numeric: tabular-nums; } .wp-block-table .is-numeric, .wp-block-table [data-align="numeric"] { text-align: right; font-variant-numeric: tabular-nums; } .wp-block-table::-webkit-scrollbar { height: 6px; } .wp-block-table::-webkit-scrollbar-track { background: transparent; } .wp-block-table::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; } .wp-block-table table { width: 100%; min-width: 100%; border-collapse: collapse; margin: 0; caption-side: bottom; text-indent: 0; } .wp-block-table caption { padding: var(--space-half) var(--space-single); font-size: var(--fs-s); color: var(--color-text-sec); text-align: left; } .wp-block-table > figcaption, .wp-block-table > .wp-element-caption { position: sticky; inset-inline-start: 0; box-sizing: border-box; inline-size: 100%; max-inline-size: 100vw; margin: 0; padding: var(--space-half) var(--space-single); border-block-start: 1px solid var(--color-border); background: var(--table-tint-1); color: var(--color-text-sec); font-size: var(--fs-s); text-align: start; } .wp-block-table thead th { background: var(--table-tint-2); font-weight: 500; font-size: var(--fs-s); color: var(--color-text-sec); text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); white-space: nowrap; } .wp-block-table tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); vertical-align: middle; } .wp-block-table tbody tr:last-child td { border-bottom: none; } .wp-block-table tbody tr { transition: background var(--motion-fast); } @media (hover: hover) { .wp-block-table tbody tr:hover { background: var(--table-tint-2); } } .wp-block-table tfoot td { font-weight: 500; padding: 0.75rem 1rem; border-top: 1px solid var(--color-border); } .wp-block-table.is-style-small-table { font-size: var(--fs-s); } .wp-block-table.is-style-small-table thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.5rem 0.75rem; } .wp-block-table.is-style-small-table tbody td { padding: 0.5rem 0.75rem; } .wp-block-table.is-style-ratings tbody td:first-child { font-weight: var(--font-weight-bold); } .wp-block-table.is-style-ratings strong::after, .wp-block-table.is-style-ratings b::after { content: " \e9d9"; font-family: md-icon; } .wp-block-table.is-style-services { box-shadow: var(--shadow-sm); } .wp-block-table.is-style-services thead th { background: color-mix(in srgb, var(--color-text) 90%, var(--color-bg)); color: var(--color-content-bg); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-s); } .wp-block-table.is-style-services tbody td:first-child { font-weight: var(--font-weight-bold); } .wp-block-table.is-style-comparison table { table-layout: fixed; } .wp-block-table.is-style-comparison thead th { text-align: center; border-bottom-width: 2px; } .wp-block-table.is-style-comparison thead th:first-child { text-align: left; background: var(--color-content-bg); border-right: 1px solid var(--color-border); } .wp-block-table.is-style-comparison tbody td { text-align: center; } .wp-block-table.is-style-comparison tbody td:first-child { text-align: left; background: var(--table-tint-1); border-right: 1px solid var(--color-border); } .wp-block-table.has-sticky-column td:first-child, .wp-block-table.has-sticky-column th:first-child { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--color-content-bg); box-shadow: 1px 0 0 var(--color-border), 4px 0 8px -4px var(--shadow-tint, rgba(0, 0, 0, 0.06)); } .wp-block-table.has-sticky-column thead th:first-child { background: var(--table-tint-2); } @media (hover: hover) { .wp-block-table.has-sticky-column tbody tr:hover td:first-child { background: var(--table-tint-2); } } .wp-block-table.has-sticky-column th:first-child { z-index: 3; } .wp-block-table.is-style-services.has-sticky-column thead th:first-child { background: color-mix(in srgb, var(--color-text) 90%, var(--color-bg)); z-index: 3; } .wp-block-table.is-style-services.has-sticky-column tbody td:first-child { background: var(--color-content-bg); box-shadow: 2px 0 4px var(--shadow-tint, rgba(0,0,0,0.06)); } .wp-block-table.is-style-comparison.has-sticky-column td:first-child, .wp-block-table.is-style-comparison.has-sticky-column th:first-child { position: sticky; left: 0; z-index: 2; } .wp-block-table.is-style-comparison.has-sticky-column th:first-child { z-index: 3; } .wp-block-table.is-style-striped tbody tr:nth-child(even) { background: var(--table-tint-1); } .wp-block-table.is-style-striped tbody td { border-block-end: 0; } .wp-block-table.is-style-striped.has-sticky-column tbody tr:nth-child(even) td:first-child { background: var(--table-tint-1); } @media (max-width: 640px) { .wp-block-table thead th, .wp-block-table tbody td, .wp-block-table tfoot td { padding: 0.5rem 0.625rem; } .wp-block-table.is-style-small-table thead th, .wp-block-table.is-style-small-table tbody td { padding: 0.375rem 0.5rem; } .wp-block-table thead th { white-space: normal; } }