顯示或不顯示與CSS的行

我不是一個程序員，但嘗試盡我所能與我自己的網站。我有一個在線服裝商店，我想在商品描述上顯示該商品的可用值，現在我有一張表，其中包含一些我想要隱藏並壓縮表的表，如果沒有它的值。例如...顯示或不顯示與CSS的行

<tr> 
    <td style="width:30%"><b>· Hip:</b> {{HIP}}</td> 

    </tr> 
    <tr> 
    <td style="width:30%"><b>· Inseam:</b> {{INSEAM}}</td> 

    </tr> 
    <tr> 
    <td style="width:30%"><b>· Rise:</b> {{RISE}}</td> 

    </tr>

它應該顯示...

· Hip: {{HIP}} 
· Inseam: {{INSEAM}} 
· Rise: {{RISE}}

我想，如果我沒有在我的資源文件中的「襠」值此行會隱藏，只是顯示...

· Hip: {{HIP}} 
· Rise: {{RISE}}

我不能使用JavaScript作爲eBay不允許它。對不起，如果我不用正確的編程語言表達自己。希望可以有人幫幫我。謝謝大家！！！

來源

2017-10-29 Willy

您不能僅使用CSS來完成此操作，您可以使用display：none來隱藏行，但是如果必須有條件地根據是否它是在那裏在數據庫或不，你需要javascript – Buddha

你可以用CSS做，看我的回答 – Asthmatic

-1

https://css-tricks.com/almanac/selectors/e/empty/

隨着重構你的代碼和一點點：空pseudoselector：

HTML：

<table> 
    <tr> 
    <td class="hip" style="width:30%">{{HIP}}</td> 
    </tr> 
    <tr> 
    <td class="inseam" style="width:30%"></td> 
    </tr> 
    <tr> 
    <td class="rise" style="width:30%">{{RISE}}</td> 
    </tr> 
</table>

CSS：

.hip:before { 
    content: '· Hip: '; 
    font-weight: bold; 
} 

.inseam:before { 
    content: '· Inseam: '; 
    font-weight: bold; 
} 

.rise:before { 
    content: '· Rise: '; 
    font-weight: bold; 
} 

.inseam:empty { 
    display: none; 
}

小提琴：http://jsfiddle.net/3fL1y0mg/2/

嘗試將{{INSEAM}}添加到該表格行中

來源

2017-10-29 02:04:20 Asthmatic

作品!!!!非常感謝...我想給你答案，但我不能。它有一個5 + – Willy

沒關係，不知道爲什麼有人會投票反對:) – Asthmatic

顯示或不顯示與CSS的行

回答

相關問題