WP5.3で検証

フォーマット

表

デフォルト表示

1/A2/A3/A4/A5/A
1/B2/B3/B4/B5/B
1/C2/C3/C4/C5/C
1/D2/D3/D4/D5/D
1/E2/E3/E4/E5/E
<figure class="wp-block-table">
	<table class="">
		<tbody>
			<tr><td>1/A</td><td>2/A</td><td>3/A</td><td>4/A</td><td>5/A</td></tr>
			<tr><td>1/B</td><td>2/B</td><td>3/B</td><td>4/B</td><td>5/B</td></tr>
			<tr><td>1/C</td><td>2/C</td><td>3/C</td><td>4/C</td><td>5/C</td></tr>
			<tr><td>1/D</td><td>2/D</td><td>3/D</td><td>4/D</td><td>5/D</td></tr>
			<tr><td>1/E</td><td>2/E</td><td>3/E</td><td>4/E</td><td>5/E</td></tr>
		</tbody>
	</table>
</figure>

ストライプ

1/A2/A3/A4/A5/A
1/B2/B3/B4/B5/B
1/C2/C3/C4/C5/C
1/D2/D3/D4/D5/D
1/E2/E3/E4/E5/E
<figure class="wp-block-table is-style-stripes">
	<table class="">
		<tbody>
			<tr><td>1/A</td><td>2/A</td><td>3/A</td><td>4/A</td><td>5/A</td></tr>
			<tr><td>1/B</td><td>2/B</td><td>3/B</td><td>4/B</td><td>5/B</td></tr>
			<tr><td>1/C</td><td>2/C</td><td>3/C</td><td>4/C</td><td>5/C</td></tr>
			<tr><td>1/D</td><td>2/D</td><td>3/D</td><td>4/D</td><td>5/D</td></tr>
			<tr><td>1/E</td><td>2/E</td><td>3/E</td><td>4/E</td><td>5/E</td></tr>
		</tbody>
	</table>
</figure>

固定幅のテーブルセル

通常はこれ2/A3/A4/A5/A
1/B2/B3/B4/B5/B
1/C2/C3/C4/C5/C
1/D2/D3/D4/D5/D
1/E2/E3/E4/E5/E
固定幅にするとこうなる2/A3/A4/A5/A
1/B2/B3/B4/B5/B
1/C2/C3/C4/C5/C
1/D2/D3/D4/D5/D
1/E2/E3/E4/E5/E
<figure class="wp-block-table is-style-regular">
	<table class="has-fixed-layout">
		<tbody>
			<tr><td>1/A</td><td>2/A</td><td>3/A</td><td>4/A</td><td>5/A</td></tr>
			<tr><td>1/B</td><td>2/B</td><td>3/B</td><td>4/B</td><td>5/B</td></tr>
			<tr><td>1/C</td><td>2/C</td><td>3/C</td><td>4/C</td><td>5/C</td></tr>
			<tr><td>1/D</td><td>2/D</td><td>3/D</td><td>4/D</td><td>5/D</td></tr>
			<tr><td>1/E</td><td>2/E</td><td>3/E</td><td>4/E</td><td>5/E</td></tr>
		</tbody>
	</table>
</figure>

ヘッダーセクション

1/A2/A3/A4/A5/A
1/B2/B3/B4/B5/B
1/C2/C3/C4/C5/C
1/D2/D3/D4/D5/D
1/E2/E3/E4/E5/E
<figure class="wp-block-table is-style-regular">
	<table class="">
		<thead>
			<tr><th>1/A</th><th>2/A</th><th>3/A</th><th>4/A</th><th>5/A</th></tr>
		</thead>
		<tbody>
			<tr><td>1/B</td><td>2/B</td><td>3/B</td><td>4/B</td><td>5/B</td></tr>
			<tr><td>1/C</td><td>2/C</td><td>3/C</td><td>4/C</td><td>5/C</td></tr>
			<tr><td>1/D</td><td>2/D</td><td>3/D</td><td>4/D</td><td>5/D</td></tr>
			<tr><td>1/E</td><td>2/E</td><td>3/E</td><td>4/E</td><td>5/E</td></tr>
		</tbody>
	</table>
</figure>

フッターセクション

1/A2/A3/A4/A5/A
1/B2/B3/B4/B5/B
1/C2/C3/C4/C5/C
1/D2/D3/D4/D5/D
1/E2/E3/E4/E5/E
<figure class="wp-block-table is-style-regular">
	<table class="">
		<tbody>
			<tr><td>1/A</td><td>2/A</td><td>3/A</td><td>4/A</td><td>5/A</td></tr>
			<tr><td>1/B</td><td>2/B</td><td>3/B</td><td>4/B</td><td>5/B</td></tr>
			<tr><td>1/C</td><td>2/C</td><td>3/C</td><td>4/C</td><td>5/C</td></tr>
			<tr><td>1/D</td><td>2/D</td><td>3/D</td><td>4/D</td><td>5/D</td></tr>
		</tbody>
		<tfoot>
			<tr><td>1/E</td><td>2/E</td><td>3/E</td><td>4/E</td><td>5/E</td></tr>
		</tfoot>
	</table>
</figure>

色設定

1/A2/A3/A4/A5/A
1/B2/B3/B4/B5/B
1/C2/C3/C4/C5/C
1/D2/D3/D4/D5/D
1/E2/E3/E4/E5/E
<figure class="wp-block-table is-style-regular">
	<table class="has-subtle-pale-green-background-color has-background">
		<thead>
			<tr><th>1/A</th><th>2/A</th><th>3/A</th><th>4/A</th><th>5/A</th></tr>
		</thead>
		<tbody>
			<tr><td>1/B</td><td>2/B</td><td>3/B</td><td>4/B</td><td>5/B</td></tr>
			<tr><td>1/C</td><td>2/C</td><td>3/C</td><td>4/C</td><td>5/C</td></tr>
			<tr><td>1/D</td><td>2/D</td><td>3/D</td><td>4/D</td><td>5/D</td></tr>
			<tr><td>1/E</td><td>2/E</td><td>3/E</td><td>4/E</td><td>5/E</td></tr>
		</tbody>
	</table>
</figure>

ブロック設定パネル

高度な設定

スタイル
デフォルト / ストライプ

表の設定
固定幅のテーブルセル
ヘッダーセクション
フッターセクション

色設定
背景色が変わります。
標準ではパステル調の4色があり、通常の色設定パネルとは異なる。

スタイル設定

標準スタイル

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

.wp-block-table table {
    width:100%
}

.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 {
    border-spacing: 0;
    border-collapse: inherit;
    background-color: transparent;
    border-bottom:1px solid #f3f4f5
}

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

.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 {
    border-collapse:collapse
}

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

ブロック制御コメント

<!-- wp:table -->
<!-- /wp:table -->

WAF解除

SiteGuard_User_ExcludeSig sqlinj-5