.wp-block-table { display: block; overflow-x: auto; -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::-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 thead th { background: color-mix(in srgb, var(--color-bg) 50%, var(--color-content-bg)); 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 0.15s ease; } @media (hover: hover) { .wp-block-table tbody tr:hover { background: color-mix(in srgb, var(--color-bg) 30%, var(--color-content-bg)); } } .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-text-light); 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: color-mix(in srgb, var(--color-bg) 20%, var(--color-content-bg)); 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; left: 0; z-index: 2; background: inherit; } .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 rgba(0, 0, 0, 0.05); } .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; }