Question

我试图隐藏包含某些内容的表格中的一行。我面临一些问题..

1）高度设置为0后，边框仍然显示。如何隐藏整个div？

2）因为有colspan =＆＃34; 5＆＃34;对于隐藏表格宽度缩小的内容

<table>

<tr>
    <td class="item0">test td 1</td>
    <td class="item1">test td 2</td>
    <td class="item2">test td 3</td>
    <td class="item3">test td 4</td>
    <td class="item4">Click for content</td>     
</tr>
<tr>
    <td  colspan="5">
        <div ng-hide="show" class="cssSlideUp">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar nisi sit amet luctus efficitur. Vivamus eu risus suscipit, ultricies tortor eu, sodales tellus. Sed sed feugiat massa. Cras mollis, erat eget pellentesque porttitor, mauris lectus ultricies neque, varius iaculis quam mi et quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc egestas nec mi eu lobortis. Nam eu scelerisque orci. Mauris vel ultricies dui, non accumsan turpis. Aliquam pulvinar in dolor sit amet fringilla. Integer sed quam pellentesque, volutpat arcu a, feugiat nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor ac nulla sit amet suscipit.
        </div>
    </td>
</tr>
<tr>
    <td class="item0">test td 5</td>
    <td class="item1">test td 6</td>
    <td class="item2">test td 7</td>
    <td class="item3">test td 8</td>
    <td class="item4">Click for content</td>     
</tr>
</table>

Plnkr：http://plnkr.co/edit/4ovuZ7YwOB3i8bK7WLLz?p=preview

Answer 1

你正在隐藏整个div。

问题是你在td上设置了边框。这是你隐藏的div的父元素，这就是边界仍然存在的原因。

如果您希望表格始终具有相同的宽度，则您需要设置其宽度。例如。将此添加到您的CSS：

table{width:100%;}

Answer 2

当您隐藏div时，表会缩小，因为它没有设置为宽度。因此，它只会缩小到显示剩余内容所需的大小。

尝试为表格的CSS添加样式，以强制它始终为特定宽度，无论内容如何：

table { width: 100%; }

...或

<table width="100%">

至于边界问题，请将你移动到'tr'：

<tr ng-hide="show">
    <td  colspan="5">
        <div class="cssSlideUp">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar nisi sit amet luctus efficitur. Vivamus eu risus suscipit, ultricies tortor eu, sodales tellus. Sed sed feugiat massa. Cras mollis, erat eget pellentesque porttitor, mauris lectus ultricies neque, varius iaculis quam mi et quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc egestas nec mi eu lobortis. Nam eu scelerisque orci. Mauris vel ultricies dui, non accumsan turpis. Aliquam pulvinar in dolor sit amet fringilla. Integer sed quam pellentesque, volutpat arcu a, feugiat nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor ac nulla sit amet suscipit.
        </div>
    </td>
</tr>

使用ngAnimate隐藏表中的一行

2 个答案: