与表格的CSS转换

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; 
} 

这两件事增加了，第一行的单元格改变大小的问题有点似乎修复本身，据我所知。

其他更新我做了包括来自.column2取出visibility属性，因为它不是绝对必要的，至少就在小提琴的代码而言，我也从table.focus .column2删除的过渡，因为从刚才的过渡性质.column2的常规样式将在focus类删除后立即启动，以便将列转换回隐藏状态，因此在表具有focus类时再次将转移属性添加到单元中实际上是不必要的。事实上，这种风格从来没有实际做过任何事情。

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

至少在Chrome中，默认情况下，您已将border-collapse设置为separate和2px值设置为border-spacing。更改这两种属性都会有效地去除柱之间的差距：

/* either */ 
table { 
    border-collapse: collapse; 
} 

/* or */ 
table { 
    border-spacing: 0px; 
} 

设置border-collapse: collapse会给我们一个简洁的外观，但我们不妨也改变border-spacing财产，而我们在它（即使它对折叠的边框不做任何事情），因为没有间距是我们真正追求的。然后我们剩下一个问题，在表格中间有一个较粗的边框，而第二列是隐藏的，这是由双边框 - 第一列的右边框和第三列的左边框造成的。为了清除这个问题，我们可以为第一列的右边框设置一个0pxborder-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'); 
 
    \t if(tabIndex == 3) { 
 
    \t tabIndex = 0; 
 
    } else { 
 
    \t 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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="body"> 
 
    <div ng-controller="FrameController as vm"> 
 
    
 
<div id="myContainer"> 
 

 
    <table id="table1"> 
 
     <tbody> 
 
     <tr> 
 
      <td class="column1" style="width: 80px">Red Apple</td> 
 
      <td class="column2"> Lorem ipsum dolor sit amet </td> 
 
      <td class="column3">U$ 0.12</td> 
 
     </tr> 
 
      <tr> 
 
      <td class="column1">Red Apple</td> 
 
      <td class="column2"> Lorem ipsum dolor sit amet, </td> 
 
      <td class="column3">U$ 0.12</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    
 
    <table id="table2"> 
 
     <tbody> 
 
     <tr> 
 
      <td class="column1">Red Apple</td> 
 
      <td class="column2"></td> 
 
      <td class="column3">U$ 0.12</td> 
 
     </tr> 
 
      <tr> 
 
      <td class="column1">Red Apple</td> 
 
      <td class="column2"></td> 
 
      <td class="column3">U$ 0.12</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    
 
    <table id="table3"> 
 
     <tbody> 
 
     <tr> 
 
      <td class="column1">Red Apple</td> 
 
      <td class="column2"> Lorem ipsum dolor sit amet </td> 
 
      <td class="column3">U$ 0.12</td> 
 
     </tr> 
 
      <tr> 
 
      <td class="column1">Red Apple</td> 
 
      <td class="column2"> Lorem ipsum dolor sit amet, </td> 
 
      <td class="column3">U$ 0.12</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 

 
</div> 
 
<button ng-click="vm.pressTab()"> Press Tab</button> 
 
    </div> 
 
</div>