列を削除せずに特定のデータを非表示にしつつ、テーブルのレイアウトが崩れないようにするためには、次の方法を試すことができます。

具体的には、非表示にしたいデータを含む列を、display: none;で隠すのではなく、その列を直接テーブルから削除し、必要なデータを隠すための代替のアプローチを取ります。

方法: visibility: hidden;とdisplay: none;を併用

ここでは、列自体を削除するのではなく、CSSを使って表示を制御しますが、特定のデータだけを非表示にするためにvisibility: hidden;を使います。これにより、データは隠されますが、他のセルが正しく配置されます。

修正後のテーブル（CSSを使用）

html

コードをコピーする

<table border="1">

<tr>

<th>名前</th>

<th>種類</th>

<th>必殺技</th>

</tr>

<tr>

<td>アンパンマン</td>

<td style="visibility: hidden;">粒あんパン</td> <!-- 粒あんパンを非表示 -->

<td>アンパンチ</td>

</tr>

<tr>

<td>カレーパンマン</td>

<td style="visibility: hidden;">カレーパン</td> <!-- カレーパンを非表示 -->

<td>カレービュー</td>

</tr>

<tr>

<td>しょくぱんまん</td>

<td style="visibility: hidden;">食パン</td> <!-- 食パンを非表示 -->

<td>しょくパンチ</td>

</tr>

</table>

説明

各行の<td>タグにstyle="visibility: hidden;"を設定しています。この設定により、セルは表示されなくなりますが、空間は占有します（他の列はそのままの位置に保たれます）。

各セルのデータは存在するため、HTMLの構造として保持されますが、見た目には表示されません。