Table block in Gurtenberg not diplay correcly at the frontend

Dear Rodlens Hora,

We hope this message finds you well.

To address the issue you are experiencing, we kindly request that you implement the following CSS code. Please navigate to the Theme Options, select Theme Custom CSS, and then insert the code into the Global CSS section:

.wp-block-table {
    overflow-x: auto;
}

.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
}

.wp-block-table thead {
    border-bottom: 3px solid;
}

.wp-block-table tfoot {
    border-top: 3px solid;
}

.wp-block-table td, .wp-block-table th {
    border: 1px solid;
    padding: .5em;
}

.wp-block-table .has-fixed-layout {
    table-layout: fixed;
    width: 100%;
}

.wp-block-table .has-fixed-layout td, .wp-block-table .has-fixed-layout th {
    word-break: break-word;
}

.wp-block-table.aligncenter, .wp-block-table.alignleft, .wp-block-table.alignright {
    display: table;
    width: auto;
}

.wp-block-table.aligncenter td, .wp-block-table.aligncenter th, .wp-block-table.alignleft td, .wp-block-table.alignleft th, .wp-block-table.alignright td, .wp-block-table.alignright th {
    word-break: break-word;
}

.wp-block-table .has-subtle-light-gray-background-color {
    background-color: #f3f4f5;
}

.wp-block-table .has-subtle-pale-green-background-color {
    background-color: #e9fbe5;
}

.wp-block-table .has-subtle-pale-blue-background-color {
    background-color: #e7f5fe;
}

.wp-block-table .has-subtle-pale-pink-background-color {
    background-color: #fcf0ef;
}

.wp-block-table.is-style-stripes {
    background-color: transparent;
    border-bottom: 1px solid #f0f0f0;
    border-collapse: inherit;
    border-spacing: 0;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: #f0f0f0;
}

.wp-block-table.is-style-stripes.has-subtle-light-gray-background-color tbody tr:nth-child(odd) {
    background-color: #f3f4f5;
}

.wp-block-table.is-style-stripes.has-subtle-pale-green-background-color tbody tr:nth-child(odd) {
    background-color: #e9fbe5;
}

.wp-block-table.is-style-stripes.has-subtle-pale-blue-background-color tbody tr:nth-child(odd) {
    background-color: #e7f5fe;
}

.wp-block-table.is-style-stripes.has-subtle-pale-pink-background-color tbody tr:nth-child(odd) {
    background-color: #fcf0ef;
}

.wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th {
    border-color: transparent;
}

.wp-block-table .has-border-color td, .wp-block-table .has-border-color th, .wp-block-table .has-border-color tr, .wp-block-table .has-border-color > * {
    border-color: inherit;
}

.wp-block-table table[style*=border-top-color] tr:first-child, .wp-block-table table[style*=border-top-color] tr:first-child td, .wp-block-table table[style*=border-top-color] tr:first-child th, .wp-block-table table[style*=border-top-color] > *, .wp-block-table table[style*=border-top-color] > * td, .wp-block-table table[style*=border-top-color] > * th {
    border-top-color: inherit;
}

.wp-block-table table[style*=border-top-color] tr:not(:first-child) {
    border-top-color: currentColor;
}

.wp-block-table table[style*=border-right-color] td:last-child, .wp-block-table table[style*=border-right-color] th, .wp-block-table table[style*=border-right-color] tr, .wp-block-table table[style*=border-right-color] > * {
    border-right-color: inherit;
}

.wp-block-table table[style*=border-bottom-color] tr:last-child, .wp-block-table table[style*=border-bottom-color] tr:last-child td, .wp-block-table table[style*=border-bottom-color] tr:last-child th, .wp-block-table table[style*=border-bottom-color] > *, .wp-block-table table[style*=border-bottom-color] > * td, .wp-block-table table[style*=border-bottom-color] > * th {
    border-bottom-color: inherit;
}

.wp-block-table table[style*=border-bottom-color] tr:not(:last-child) {
    border-bottom-color: currentColor;
}

.wp-block-table table[style*=border-left-color] td:first-child, .wp-block-table table[style*=border-left-color] th, .wp-block-table table[style*=border-left-color] tr, .wp-block-table table[style*=border-left-color] > * {
    border-left-color: inherit;
}

.wp-block-table table[style*=border-style] td, .wp-block-table table[style*=border-style] th, .wp-block-table table[style*=border-style] tr, .wp-block-table table[style*=border-style] > * {
    border-style: inherit;
}

.wp-block-table table[style*=border-width] td, .wp-block-table table[style*=border-width] th, .wp-block-table table[style*=border-width] tr, .wp-block-table table[style*=border-width] > * {
    border-style: inherit;
    border-width: inherit;
}

.wp-block-table table td:last-child, 
.wp-block-table table th:last-child {
    text-align: left;
    text-align: start;
}

.wp-block-table table td:first-child, 
.wp-block-table table th:first-child {
    padding-left: 0.5em;
}

We trust that the above code will effectively resolve the issue at hand. Should you require any further assistance, please do not hesitate to contact us.

Best regards,
The 8Theme Team

Hi @Rodlens Hora,

We’re trying to login using your temporarily link but it’s not working anymore.

Can you please double check?

Thank you!

Dear Rodlens Hora,

We hope this message finds you well.

We kindly request that you make an update to the custom CSS codes for your website. Please replace the existing CSS with the following code:

.wp-block-table {
    overflow-x: auto;
}
.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
}
.wp-block-table thead {
    border-bottom: 3px solid;
}
.wp-block-table tfoot {
    border-top: 3px solid;
}
.wp-block-table td, .wp-block-table th {
    border: 1px solid;
    padding: .5em;
}
.wp-block-table .has-fixed-layout {
    table-layout: fixed;
    width: 100%;
}
.wp-block-table .has-fixed-layout td, .wp-block-table .has-fixed-layout th {
    word-break: break-word;
}
.wp-block-table.aligncenter, .wp-block-table.alignleft, .wp-block-table.alignright {
    display: table;
    width: auto;
}
.wp-block-table.aligncenter td, .wp-block-table.aligncenter th, .wp-block-table.alignleft td, .wp-block-table.alignleft th, .wp-block-table.alignright td, .wp-block-table.alignright th {
    word-break: break-word;
}
.wp-block-table .has-subtle-light-gray-background-color {
    background-color: #f3f4f5;
}
.wp-block-table .has-subtle-pale-green-background-color {
    background-color: #e9fbe5;
}
.wp-block-table .has-subtle-pale-blue-background-color {
    background-color: #e7f5fe;
}
.wp-block-table .has-subtle-pale-pink-background-color {
    background-color: #fcf0ef;
}
.wp-block-table.is-style-stripes {
    background-color: transparent;
    border-bottom: 1px solid #f0f0f0;
    border-collapse: inherit;
    border-spacing: 0;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: #f0f0f0;
}
.wp-block-table.is-style-stripes.has-subtle-light-gray-background-color tbody tr:nth-child(odd) {
    background-color: #f3f4f5;
}
.wp-block-table.is-style-stripes.has-subtle-pale-green-background-color tbody tr:nth-child(odd) {
    background-color: #e9fbe5;
}
.wp-block-table.is-style-stripes.has-subtle-pale-blue-background-color tbody tr:nth-child(odd) {
    background-color: #e7f5fe;
}
.wp-block-table.is-style-stripes.has-subtle-pale-pink-background-color tbody tr:nth-child(odd) {
    background-color: #fcf0ef;
}
.wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th {
    border-color: transparent;
}
.wp-block-table .has-border-color td, .wp-block-table .has-border-color th, .wp-block-table .has-border-color tr, .wp-block-table .has-border-color > * {
    border-color: inherit;
}
.wp-block-table table[style*=border-top-color] tr:first-child, .wp-block-table table[style*=border-top-color] tr:first-child td, .wp-block-table table[style*=border-top-color] tr:first-child th, .wp-block-table table[style*=border-top-color] > *, .wp-block-table table[style*=border-top-color] > * td, .wp-block-table table[style*=border-top-color] > * th {
    border-top-color: inherit;
}
.wp-block-table table[style*=border-top-color] tr:not(:first-child) {
    border-top-color: currentColor;
}
.wp-block-table table[style*=border-right-color] td:last-child, .wp-block-table table[style*=border-right-color] th, .wp-block-table table[style*=border-right-color] tr, .wp-block-table table[style*=border-right-color] > * {
    border-right-color: inherit;
}
.wp-block-table table[style*=border-bottom-color] tr:last-child, .wp-block-table table[style*=border-bottom-color] tr:last-child td, .wp-block-table table[style*=border-bottom-color] tr:last-child th, .wp-block-table table[style*=border-bottom-color] > *, .wp-block-table table[style*=border-bottom-color] > * td, .wp-block-table table[style*=border-bottom-color] > * th {
    border-bottom-color: inherit;
}
.wp-block-table table[style*=border-bottom-color] tr:not(:last-child) {
    border-bottom-color: currentColor;
}
.wp-block-table table[style*=border-left-color] td:first-child, .wp-block-table table[style*=border-left-color] th, .wp-block-table table[style*=border-left-color] tr, .wp-block-table table[style*=border-left-color] > * {
    border-left-color: inherit;
}
.wp-block-table table[style*=border-style] td, .wp-block-table table[style*=border-style] th, .wp-block-table table[style*=border-style] tr, .wp-block-table table[style*=border-style] > * {
    border-style: inherit;
}
.wp-block-table table[style*=border-width] td, .wp-block-table table[style*=border-width] th, .wp-block-table table[style*=border-width] tr, .wp-block-table table[style*=border-width] > * {
    border-style: inherit;
    border-width: inherit;
}
.wp-block-table table td:last-child, 
.wp-block-table table th:last-child {
    text-align: left;
    text-align: start;
}
body .wp-block-table table td, 
body .wp-block-table table th {
    padding: 0.5em;
}
body .wp-block-table td.has-text-align-center, 
body .wp-block-table th.has-text-align-center {
    text-align: center;
}
body .wp-block-table td.has-text-align-right, 
body .wp-block-table th.has-text-align-right {
    text-align: right;
}

Please implement these changes at your earliest convenience and inform us of the outcome. Should you encounter any issues or require further assistance, do not hesitate to reach out.

Best regards,
8Theme’s Team

You’re most welcome.

Kind regards,
The 8Theme Team