Html CSS可设置动画的表格行宽度？

以下面的基本css表为例。是否可以将表格单元格设置为零宽度，并通过css设置动画？我似乎可以隐藏表格单元格的唯一方法是使用

display:none

，但这是不可设置动画的。这可能吗

.table{
显示：表格；
宽度：100%；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
外形：1px固体#000；
文本对齐：居中；
过渡：宽度0.5s；
}
左边
.对{
宽度：50%；
}
.中心{
宽度：0%；
}
@介质（最小宽度：480px）{
左边
.对,，
.中心{
宽度：33.333%；
颜色：红色；
}
}

左边
居中
正确的

类似

---

您可以在

.center

div中为内容添加另一个容器，如下所示：

<div class='table'>
    <div class='row'>
        <div class='cell left'>left</div>
        <div class='cell center'>
          <div class="hideme">center</div>
        </div>
        <div class='cell right'>right</div>
    </div>
</div>

选中此项

动画表格单元格宽度更改 这种神奇的酱汁是放在桌子上的

单元格宽度更改为

0%

或

0px

-用于收缩单元格的长度类型必须与用于正常单元格宽度的长度类型相同。在下面的示例中，正常宽度为

33%

，因此宽度更改为

0%

过渡示例 如果当用户以某种方式与表格单元格进行交互时，动画仅用于隐藏表格单元格，则单元格上的

转换

属性就是您所需要的：

.table{
显示：表格；
宽度：100%；
表布局：固定；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
外形：1px固体#000；
文本对齐：居中；
宽度：33%；
溢出：隐藏；
过渡：宽度4s；
}
.表格：悬停.居中{
宽度：0%
}

左边
居中
正确的

使用内联块而不是表格单元格。然后你可以做你想做的。好的，谢谢，但是其他单元格的宽度呢？他们有点走火入魔了。空白是从哪里来的？您可以清空中间单元格的内容，并使用CSS添加“中心”一词。不确定你是否只想在单元格中输入一个单词。很好的解决方案。非常感谢。

<div class='table'>
    <div class='row'>
        <div class='cell left'>left</div>
        <div class='cell center'>
          <div class="hideme">center</div>
        </div>
        <div class='cell right'>right</div>
    </div>
</div>

.hideme {
    display: none;
}

@media (min-width: 480px) {
    .left,
    .right,
    .center {
        width: 33.333%;
        color: red;
    }
    .hideme {
        display: inline;
    }
}