tr/td高度拒絕爲0

我試圖做一件很簡單的事情：將tr的高度設置爲0px，但它不起作用。tr/td高度拒絕爲0

請參閱我的試用碼或this JSFiddle。

HTML：

<table> 
    <tbody> 
    <tr> 
     <td> 
     Title 1 
     </td> 
     <td> 
     Title 2 
     </td> 
    </tr> 
    <tr class="model"> 
     <td> 
     <input placeholder="Name"> 
     </td> 
     <td> 
     <input class="delete" type="checkbox"> 
     </td> 
    </tr> 
</table>

CSS：

.model, .model * { 
    max-height: 0 !important; 
    min-height: 0 !important; 
    height: 0 !important; 
    margin-top: 0 !important; 
    margin-bottom: 0 !important; 
    padding-top: 0 !important; 
    padding-bottom: 0 !important; 
    border-top: 0 !important; 
    border-bottom: 0 !important; 
    outline: 0 !important; 
} 

.model { 
    background-color: red; 
}

結果：

有一個在結果紅，所以tr高度依然不爲0

如何在保持寬度的同時將其設爲0,？

編輯：問題似乎是checkbox嵌套到td。我怎麼能得到其高度降至0？

來源

2016-01-23 Quelklef

爲什麼你想讓0高度的TR？或者只是想讓這些輸入字段對用戶隱藏？ – FrozenFire

@FrozenFire爲什麼在600個字符中有點難以解釋，但我可以說我需要'tr'高度爲0，而不僅僅是輸入。 – Quelklef

您可以將這些輸入放在標題1或2下，然後隱藏它。 – FrozenFire

添加font-size:0; margin:0;到類

來源

2016-01-23 06:02:52 Nate

很好的答案，但我需要保持寬度。看到我的編輯，對不起。 – Quelklef

@Quelklef解決方案能明確指定任何寬度嗎？如果是這樣，請使用font-size：0並手動指定寬度。 – Nate

雖然我可以做到這一點，我寧願不要。這樣，我可以改變孩子的寬度，而不必改變'tr'的屬性。 – Quelklef

通過使用不透明度，我們可以隱藏的tr td內容一旦檢查this

來源

2016-01-23 06:28:17

包裝在一個DIV，將其設置爲不夠高，隱藏溢出：

div { height: 1.2em; overflow: hidden; }

來源

2016-01-23 06:59:12 Nate

這不起作用。 – Quelklef

@ Quelklef這樣做的工作：https://jsfiddle.net/yev1pmx0/3/ – Nate

哦，我誤解了你的建議。雖然它確實有用，但它並沒有將「tr」高度設置爲0，這正是我所要求的。 – Quelklef

如果你想保持寬度，你還需要設置這些。

line-height: 0 !important; 
visibility: hidden;

來源

2017-11-08 17:28:01 ATD

tr/td高度拒絕爲0

回答

相關問題