htmlを弄らずにテーブルを削除

Question

お世話になります。
CMS上のページをデザインする際に、
テーブルに空き項目ができてしまっているものを削除したいと思っています。
条件としては、
・CSSのみで操作
・ソースはいじれない
・ソースのクラスが共通している

ソースを一部抜粋すると、

<tr> <td valign="top" class="item_header"></td> <td valign="top" class="line_double"></td> </tr>

CSS
.item_header {
color: #FFFFFF;
background-color: #cec39e !important;
width: 120px;
padding: 15px;
text-align: left;
margin-top: 0.3em;
}

.line_double {
height: 0;
background: none;
}

となっていますが、
item_headerは、2列テーブルの左側共通となっています。

ソースを弄らずに、
CSSのみでこの部分を消したいのですが何か方法はありませんでしょうか。

よろしくお願いいたします。
（説明が下手で申し訳ないです。わからない部分があったらコメントお願いいたします。）

Answer 1

単純にdisplay:none;で削除することができました。

Answer 2

いまいち状況がわからないですが、以下の認識で合っていますか？

・横2列のテーブル
・左側の列で空のセルが存在する
・セルが空の場合はセルを非表示にしたい

empty擬似要素を使うのはいかがでしょうか。

table td:empty {
  display: none;
}

上記だとセルの中身が空の場合は、tdが非表示になります。

なお、見た目上は空白でも、セルの中にスペースなどが入っていると
空であると判断されませんのでご注意ください。

よろしくお願いいたします。

Comments

[J4CK1E]

ありがとうございます。
そのような認識であってます。

よく見たらソース内に&nbspが入っていて、
効かないようです。
&nbspを削除すれば動作するようなのですが...

[himecas]

そうなると、CSSで制御するのは無理かもしれません。少なくとも私は良い方法を思いつきません。ごめんなさい・・・