From c27020388a69f68bef3ec6ab985e847d13322902 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 13 Sep 2018 15:52:24 +0100 Subject: [PATCH 1/2] Remove invalid `display` properties on table, thead, tbody, and tfoot - `table` element needs to be `display: table` so that `table-layout: fixed` works correctly. - `thead`, `tbody` and `tfoot` need to use their default display properties, otherwise columns become misaligned between header, body and footer. (#9779) - Remove unecessary width on `thead`, `tbody`, and `tfoot` which is implicitly 100% --- packages/block-library/src/table/style.scss | 5 +---- packages/block-library/src/table/theme.scss | 13 ++----------- 2 files changed, 3 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss index 7e1a4ca401af61..494bae58899594 100644 --- a/packages/block-library/src/table/style.scss +++ b/packages/block-library/src/table/style.scss @@ -1,9 +1,6 @@ .wp-block-table { // Fixed layout toggle - &.has-fixed-layout thead, - &.has-fixed-layout tbody, - &.has-fixed-layout tfoot { - display: table; + &.has-fixed-layout { table-layout: fixed; width: 100%; } diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss index 85142028869f51..7219898d013280 100644 --- a/packages/block-library/src/table/theme.scss +++ b/packages/block-library/src/table/theme.scss @@ -1,16 +1,7 @@ .wp-block-table { - overflow-x: auto; - display: block; // Necessary in order for this table to be mobile responsive. - border-collapse: collapse; width: 100%; - - thead, - tbody, - tfoot { - width: 100%; - min-width: $break-mobile / 2; - display: table; - } + min-width: $break-mobile / 2; + border-collapse: collapse; td, th { From a9dc61cfcd99ff4d13d44b8e7487dca3418852ab Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 28 Sep 2018 12:00:29 +0100 Subject: [PATCH 2/2] Use word-break: break-all to ensure content never overflows in table cells --- 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 7219898d013280..4266ce6f110b8d 100644 --- a/packages/block-library/src/table/theme.scss +++ b/packages/block-library/src/table/theme.scss @@ -7,5 +7,6 @@ th { padding: 0.5em; border: 1px solid currentColor; + word-break: break-all; } }