From 593ed5edea5b844cb6b94c65692c6953a22ab6b2 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 24 Aug 2018 11:47:50 +0200 Subject: [PATCH 1/4] Fix table regressions. This PR fixes table block regressions introduced in https://github.com/WordPress/gutenberg/pull/7899#issuecomment-411732824 The block property for the table makes sure that it's mobile responsive. The "display table" is necessary for fixed layout to work. --- packages/block-library/src/table/style.scss | 1 + packages/block-library/src/table/theme.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss index 31a7ae479957a3..a81ec0669af32f 100644 --- a/packages/block-library/src/table/style.scss +++ b/packages/block-library/src/table/style.scss @@ -1,6 +1,7 @@ .wp-block-table { // Fixed layout toggle &.has-fixed-layout tbody { + display: table; table-layout: fixed; } } diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss index 86872dfa9e84c3..f33c55b519f04e 100644 --- a/packages/block-library/src/table/theme.scss +++ b/packages/block-library/src/table/theme.scss @@ -1,5 +1,6 @@ .wp-block-table { overflow-x: auto; + display: block; // Necessary in order for this table to be mobile responsive. border-collapse: collapse; width: 100%; From 70bff30639184b4c16931e9c8b40b6be62f4166f Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 30 Aug 2018 11:58:47 +0200 Subject: [PATCH 2/4] Address feedback: include thead, tfoot --- packages/block-library/src/table/style.scss | 4 +++- packages/block-library/src/table/theme.scss | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss index a81ec0669af32f..8c2a1ed5179e5a 100644 --- a/packages/block-library/src/table/style.scss +++ b/packages/block-library/src/table/style.scss @@ -1,6 +1,8 @@ .wp-block-table { // Fixed layout toggle - &.has-fixed-layout tbody { + &.has-fixed-layout thead, + &.has-fixed-layout tbody, + &.has-fixed-layout tfoot { display: table; table-layout: fixed; } diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss index f33c55b519f04e..04081cdadba5c2 100644 --- a/packages/block-library/src/table/theme.scss +++ b/packages/block-library/src/table/theme.scss @@ -4,7 +4,9 @@ border-collapse: collapse; width: 100%; - tbody { + thead, + tbody, + tfoot { width: 100%; min-width: $break-mobile / 2; } From b7d41bf344c7e5f5a84c3855a26484fbca43ce86 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 30 Aug 2018 15:34:53 +0200 Subject: [PATCH 3/4] Fix collapsed on init table. --- packages/block-library/src/table/theme.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss index 04081cdadba5c2..85142028869f51 100644 --- a/packages/block-library/src/table/theme.scss +++ b/packages/block-library/src/table/theme.scss @@ -9,6 +9,7 @@ tfoot { width: 100%; min-width: $break-mobile / 2; + display: table; } td, From 85b66720566f69237961df00b917cae615ab07e3 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 30 Aug 2018 15:38:45 +0200 Subject: [PATCH 4/4] Fix fixed-width cells. --- packages/block-library/src/table/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss index 8c2a1ed5179e5a..7e1a4ca401af61 100644 --- a/packages/block-library/src/table/style.scss +++ b/packages/block-library/src/table/style.scss @@ -5,5 +5,6 @@ &.has-fixed-layout tfoot { display: table; table-layout: fixed; + width: 100%; } }