グーテンベルグのテーブルのレスポンシブ

グーテンベルグのテーブルを作っています。
ダッシュボードのスタイルでテーブルのスタイルを設定し、cssでカタチを整えています。
function.phpにスタイルを追加

function my_enqueue_block_editor_assets() {
	$script = <<<SCRIPT

wp.blocks.registerBlockStyle('core/table', {
  name: 'Line',
  label: '下線'
});
SCRIPT;
	wp_add_inline_script( 'wp-blocks', $script );
}
add_action( 'enqueue_block_editor_assets', 'my_enqueue_block_editor_assets' );

PCサイズのテーブルはうまく表示されるのですが、
w480以下ではthを100%で縦並びにしたいのですが、それができません。
wp-block-table以外で作ったtableを編集画面から移植しただけなら、レスポンシブされます。
しかし、移植した場合、編集画面の「ブロックのリカバリーを試行」が出てしまい、ダッシュボードでの編集が簡単ではないので、ダッシュボードから作ったテーブルで運用していきたいです。
何か良い方法はございますでしょうか。
css————

@media(max-width: 480px){
.wp-block-table.is-style-Line th, .wp-block-table.is-style-Line td{ width: 100%; display: block;}
}

• このトピックはchatmが3年、 1ヶ月前に変更しました。