Question

我有多个表在一行中。选择一个时，它应该展开一个（直到现在隐藏）列。当取消选择时，它应该缓慢收缩。我尝试使用CSS Transition，但当单元格中没有文本时，缩小不起作用。

.column2 {
background-color: #ddd;
width: 0em;
overflow: hidden;
-webkit-transition: max-width 1.5s ease ;
-moz-transition: max-width 1.5s ease ;
transition: max-width 1.5s ease ;
max-width: 0em;
}

table.focus .column2{
    -webkit-transition: max-width 1.5s ease ;
    -moz-transition: max-width 1.5s ease;
    transition: max-width 1.5s ease;
    width: 10em;
    max-width: 10em;
}

我使用示例代码制作了fiddle。

另一件事，当我设置第一列的宽度并展开第二列时，第一列的宽度也略有变化。

我无法将单元格的宽度设置为0.是否有适用于所有浏览器的解决方案？

Answer 1

Updated fiddle

您的中间列细胞仍然略微显示，因为它们有填充和正在显示的边框。为了解决这个问题，我们将padding和border-width设置为0，然后在应用focus类时添加它们：

.column2 {
  padding: 0;
  border-width: 0;
}
table.focus .column2 {
  padding: 1px;
  border-width: 1px;
}

可以通过转换width和max-width来解决空单元格的转换问题：

.column2 {
  transition: width 1.5s ease, max-width 1.5s ease;
}

添加了这两个内容，第一行的单元格稍微改变大小的问题似乎已经解决了，据我所知。

我做的其他更新包括从visibility中移除.column2属性，因为至少就该小提琴中的代码而言，它并不是绝对必要的，而且我还从{移除了转换{1}}因为table.focus .column2类的常规样式的转换属性将在删除.column2类后立即启动，以便将列转换回隐藏，因此将过渡属性添加到当表具有focus类时，单元格实际上是不必要的。事实上，这种风格从未真正做过任何事情。

修改：隐藏第二列时，您可能仍会在第一列和最后一列之间看到一个小间隙。这实际上不是第二列（或其单元格）上的宽度。相反，这是由focus和border-spacing属性引起的，这些属性是整个表的浏览器默认值。

至少在Chrome中，默认情况下，border-collapse设置为border-collapse，separate值设置为2px。更改这些属性中的任何一个都将有效消除列之间的差距：

border-spacing

设置/* either */ table { border-collapse: collapse; } /* or */ table { border-spacing: 0px; }会给我们一个更清晰的外观，但我们也可以在我们使用它时更改border-collapse: collapse属性（即使它没有对折叠的边框做任何事情），因为没有间距是我们真正追求的。然后我们还有一个问题是桌子中间有一个较粗的边框，而第二列是隐藏的，这是由双边框引起的 - 第一列的右边框和第三列的左边框。要清理它，我们可以为第一列的右边框设置border-spacing 0px。我们的最终解决方案如下：

border-width

注意：由于第二列上的table { border-spacing: 0px; border-collapse: collapse; } .column1 { border-right-width: 0px; }颜色与background-color的颜色相同，因此无法确定第一列中是否缺少右边框当第二列扩展时。但是，如果您希望它们具有不同的颜色，那么当第二列可见时，您将能够注意到缺少的右边框。要解决这个问题，您可以在表格具有border-color类时添加另一种样式：

focus

table.focus .column1 {
  border-right-width: 1px;
}

angular.module('app', [])

.controller('FrameController', function() {
  var vm = this;
  vm.message = 'Hello world';
  var tabIndex = 0;
  
  vm.pressTab = function() {
  $('#table'+tabIndex).removeClass('focus');
  	if(tabIndex == 3) {
    	tabIndex = 0;
    } else {
    	tabIndex++;
    }

    $('#table'+tabIndex).addClass('focus');
  }

});

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});

#myContainer {
  width: 700px;
  font-size: 16px;
  border: 1px solid red;
  overflow: auto;
}
table {
  border: 0.1em solid #ddd;    
  float: left;
  margin: 0.5em;
  border-spacing: 0px;
  border-collapse: collapse;
}
table.focus {
  border: 2px solid blue;
}
table td {
  overflow: hidden;
  vertical-align: top;
  white-space: nowrap;
  text-align: left;
  border: 1px solid #ddd;
}
.column1 {
  border-right-width: 0px;
}
.column1, 
.column3 {
  width: 4em;
}
.column2 {
   background-color: #ddd;
   width: 0em;
   max-width: 0em;
   padding: 0;
   border-width: 0;
    -webkit-transition: max-width 1.5s ease, width 1.5s ease;
   -moz-transition: max-width 1.5s ease, width 1.5s ease;
   transition: max-width 1.5s ease, width 1.5s ease;
}
table.focus .column2{
   width: 10em;
   max-width: 10em;
   padding: 1px;
   border-width: 1px;
}

CSS转换表

1 个答案: