I want to add custom css to my gutenberg table block. I want to adjust the css width of the tds. Ive tried selected the “Fixed Width table cells” toggle but the table seems to have different widths. Is there a way to do that because all of the plugins I have used dont seem to work. I tried adjusting the css in the theme.css and style.css files in css/dist/block-library folder. Do I need to compile it and that is why I am not seeing the changes?

in the theme.css folder


.wp-block-table td,
.wp-block-table th {
  padding: 0.5em;
  border: 1px solid;
  word-break: normal;
  width:460px; //this is what i added
}

in the style.css folder

.wp-block-table .has-fixed-layout td,
.wp-block-table .has-fixed-layout th {
  word-break: break-word;
  width:460px; //this
}
.wp-block-table.alignleft td,
.wp-block-table.alignleft th, .wp-block-table.aligncenter td,
.wp-block-table.aligncenter th, .wp-block-table.alignright td,
.wp-block-table.alignright th {
  word-break: break-word;
  width:460px; //this
}
.wp-block-table.is-style-stripes th,
.wp-block-table.is-style-stripes td {
  border-color: transparent;
  width:460px; //this
}

0

Leave a Reply

Your email address will not be published. Required fields are marked *