diff --git a/libs/blocks/table/table.css b/libs/blocks/table/table.css index 3f9b8abc37d..2ea69698be9 100644 --- a/libs/blocks/table/table.css +++ b/libs/blocks/table/table.css @@ -692,6 +692,10 @@ margin: 0; } + .table.preserve-columns .row .section-row-title { + grid-column: auto; + } + .table:not(.merch) .row .section-head-title, .table:not(.merch) .row .section-row-title { border-right: 1px solid var(--border-color); @@ -701,12 +705,25 @@ display: block; } + .table.preserve-columns .row-heading .col-heading.col-1, + .table.preserve-columns .row.row-highlight .col-highlight.col-1 { + display: flex; + } + .table .section-head .col:not(.section-head-title), .table:not(.merch) .col-heading.col-1, .table:not(.merch) .row-highlight .col-highlight.col-1:not(:only-child) { display: none; } + .table.preserve-columns .row-heading .col-heading:first-child { + border-top-left-radius: var(--border-radius); + } + + .table.preserve-columns .row-heading .col-heading:last-child { + border-top-left-radius: 0; + } + .table:not(.merch) .row-highlight:has(> :only-child) { grid-template-columns: repeat(auto-fit, 100%); } diff --git a/libs/blocks/table/table.js b/libs/blocks/table/table.js index a5805c406bb..7d5006cc3bf 100644 --- a/libs/blocks/table/table.js +++ b/libs/blocks/table/table.js @@ -477,6 +477,7 @@ function applyStylesBasedOnScreenSize(table, originTable) { const deviceBySize = defineDeviceByScreenSize(); const setRowStyle = () => { + if (table.classList.contains('preserve-columns')) return; if (isMerch) return; const sectionRow = Array.from(table.getElementsByClassName('section-row')); if (sectionRow.length) { @@ -614,7 +615,10 @@ function applyStylesBasedOnScreenSize(table, originTable) { } removeClones(); - if (deviceBySize === 'MOBILE' || (isMerch && deviceBySize === 'TABLET')) { + if ( + !table.classList.contains('preserve-columns') + && (deviceBySize === 'MOBILE' || (isMerch && deviceBySize === 'TABLET')) + ) { mobileRenderer(); } else { table.querySelectorAll('.hide-mobile, .left-round, .right-round').forEach((col) => { col.classList.remove('hide-mobile', 'left-round', 'right-round'); }); @@ -670,6 +674,10 @@ export default function init(el) { expandSection = handleSection(sectionParams); }); + const columnCount = el.querySelector('.row-1')?.children.length || 0; + + if (columnCount <= 2) el.classList.add('preserve-columns'); + handleHighlight(el); handleStickyHeader(el); if (isMerch) formatMerchTable(el); diff --git a/test/blocks/table/mocks/two-column-table.html b/test/blocks/table/mocks/two-column-table.html new file mode 100644 index 00000000000..f0cafe13b45 --- /dev/null +++ b/test/blocks/table/mocks/two-column-table.html @@ -0,0 +1,10 @@ +
Feature
Details
Row 2 label
Row 2 value