Tables

Tables in Drupal 9 are fickle and require workarounds to make them look similar to Table in Drupal 7. To do this, we have to include custom styling to change its design.

 

Table without custom styling

table without custom CSS

 

Table with custom styling

Our custom styling adds back gridlines and removes the horizontal scroll so all the content fits on the page without the need to scroll.

table with custom CSS

Add custom styling

  1. Add Table paragraph type to page.
choose table paragraph type
  1. Set Table column and row, then fill in with content.
filled in table paragraph type
  1. Add Embed (Full HTML) paragraph type
add Embed (Full HTML)

  1. Fill in Embed (Full HTML) with code snippet.

    Copy the code below & paste in.

<style>
table {   
  display: block;                              
  overflow-x: auto;
white-space: auto;
}

table th {
   font-weight: bold;
}

table td {
white-space: normal;
}

table th, table td {              
 border: 1px solid #AEB4B9;
}
</style>

table CSS code

  1. Move the Embed (Full HTML) paragraph type to the bottom of the content block.

    If you added the Embed (Full HTML) last, it will already be at the bottom. If you did not, you must move it to the bottom or it will create a gap between your content.

    But, the Embed (Full HTML) will stylize the table regardless of it is above or below the Table paragraph type.

Embed (Full HTML) moved to bottom of content block
Move Embed (Full HTML) by dragging the 6 dots positioned on the left of the block up or down.
  1. Set Current State of page to Publish, then click Save to finalize all edits.
Save and publish edit screen