Drupal 9 Tables

Tables in Drupal 9 are more limited and require workarounds to make them look similar to tables in Drupal 7. To do this, we have to add custom styling.

If you just need to add a basic table, then skip the sections from Step 3 onwards for adding custom styling.

Table without custom styling

 

Table without custom styling
No gridlines, needs horizontal scrolling

Table with custom styling

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

Table with custom styling

Add a table

  1. Add Table paragraph type to page.
Add table paragraph to page
  1. Set Table column and row, then fill in with content.
Set table columns and rows

Add custom styling to the table

  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>

Custom 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.

Move Embed (Full HTML)
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 Publish