Gutenberg Table: One

Gutenberg table element; standard and striped tables. As used in Primary advantage

Date Published:

September 29, 2025

Plugin Requirements:

None

Template Type:

Gutenberg

Categories:

Tables

Default Table

Header Label	Header Label	Header Label
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Footer Label	Footer Label	Footer Label

Striped Table

Header Label	Header Label	Header Label
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Footer Label	Footer Label	Footer Label

CSS

/* ---- 6.1 TABLES ONE ---- */
.wp-block-table {
	border-radius:var(--radius-xl);
	border:1px solid var(--neutral-light)!important;
	border-collapse: separate; /* Important! */
  	border-spacing: 0;         /* Remove gaps */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}
.wp-block-table th {
	background-color:var(--primary);
	color:white;
	border:1px solid var(--primary)!important;
	text-align:left;
}
.wp-block-table thead {
	border-bottom:0px solid var(--primary-dark-trans-50)!important;
}
.wp-block-table tbody tr:nth-child(odd) {
	background-color:var(--neutral-ultra-light);
}
.wp-block-table td {
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-bottom:1px solid var(--neutral-light)!important;
}
.wp-block-table tfoot {
	border-top:3px solid var(--neutral-light)!important;
}
.wp-block-table tfoot td {
	font-size:var(--text-xs);
	border-bottom:0px;
}