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

回答

相关问题