diff --git a/blocks/table/table.css b/blocks/table/table.css index 4b0d84ee..98258a36 100644 --- a/blocks/table/table.css +++ b/blocks/table/table.css @@ -55,13 +55,8 @@ margin-top: 0.25em; } - .table.block.center-align table thead tr p { - width:900px; - } - .table.block.center-align table thead tr { min-height: 30px; - width: 75%; text-align: center; } @@ -183,9 +178,6 @@ margin: 0 0 12px; } - .table.block.center-align table thead tr p { - width:600px; - } .table.block.center-align table tbody tr.single-column-row td p{ width: 600px; @@ -216,6 +208,10 @@ vertical-align: top; } + .table.block.center-align table th.col-4, .table.block.center-align table td.col-4 { + vertical-align: top; + } + .table.block.center-align table th.col-5, .table.block.center-align table td.col-5 { vertical-align: top; } @@ -249,9 +245,6 @@ } - .table.block.center-align table thead tr p { - width:700px; - } .table.block table th.col-1, .table.block table td.col-1 { width: 30%; diff --git a/blocks/table/table.js b/blocks/table/table.js index c6d507a8..1a9c9b95 100644 --- a/blocks/table/table.js +++ b/blocks/table/table.js @@ -16,6 +16,9 @@ export default async function decorate(block) { const tbody = document.createElement('tbody'); const header = !block.classList.contains('no-header'); + // Determine max column count from all rows + const maxCols = Math.max(...[...block.children].map((row) => row.children.length)); + [...block.children].forEach((row, i) => { const tr = document.createElement('tr'); moveInstrumentation(row, tr); @@ -38,6 +41,11 @@ export default async function decorate(block) { // Add column index class for targeting specific columns with CSS td.classList.add(`col-${colIndex + 1}`); + // When row has fewer cells than max, add colspan so single-cell rows span full table width + if (cells.length < maxCols && colIndex === cells.length - 1) { + td.setAttribute('colspan', maxCols - cells.length + 1); + } + // Check if cell has a data-width attribute and apply it const cellWidth = cell.getAttribute('data-width'); if (cellWidth) {