diff --git a/wagtailio/project_styleguide/templates/patterns/components/streamfields/comparison_table_block/comparison_table_block.html b/wagtailio/project_styleguide/templates/patterns/components/streamfields/comparison_table_block/comparison_table_block.html index 0424a44da..30e150085 100644 --- a/wagtailio/project_styleguide/templates/patterns/components/streamfields/comparison_table_block/comparison_table_block.html +++ b/wagtailio/project_styleguide/templates/patterns/components/streamfields/comparison_table_block/comparison_table_block.html @@ -8,7 +8,11 @@ {% for col in value.comparison_table.columns %} - {{ col.heading }} + {% if col.heading %} + {{ col.heading }} + {% else %} + + {% endif %} {% endfor %} @@ -16,9 +20,15 @@ {% endif %} {% for block in row %} - - {% include_block block %} - + {% if forloop.first %} + + {{ block }} + + {% else %} + + {% include_block block %} + + {% endif %} {% endfor %} {% endfor %} diff --git a/wagtailio/static/sass/components/_comparison-table.scss b/wagtailio/static/sass/components/_comparison-table.scss index 7fc3a4926..0d17bcf05 100644 --- a/wagtailio/static/sass/components/_comparison-table.scss +++ b/wagtailio/static/sass/components/_comparison-table.scss @@ -13,15 +13,6 @@ grid-column: 2 / span 5; } - td:first-child { - font-weight: $weight--bold; - width: 150px; - - @include media-query(large) { - width: 250px - } - } - tbody { grid-column: 2 / span 2; grid-gap: 20px; @@ -34,14 +25,24 @@ grid-column: 2 / span 5; } + th { + // stylelint-disable-next-line declaration-property-value-allowed-list + text-align: left; + font-weight: $weight--bold; + width: 150px; + + @include media-query(large) { + width: 250px + } + } + > tr:last-child { - td { + td, th { border: unset; } } } - td, th { padding: 20px 20px 20px 0;