更新了小提琴 http://jsfiddle.net/hnm9wLyk/9/.
您的中间列单元格仍然略有显示，因为它们具有正在显示的填充和边框。因此，为了解决这个问题，我们设置了padding and border-width to 0，然后在focus应用类：
.column2 {
padding: 0;
border-width: 0;
}
table.focus .column2 {
padding: 1px;
border-width: 1px;
}
空单元格的转换问题可以通过转换两个单元格来解决width and max-width:
.column2 {
transition: width 1.5s ease, max-width 1.5s ease;
}
据我所知，添加这两件事后，第一行单元格大小稍微改变的问题似乎已经自行解决。
我所做的其他更新包括删除visibility财产来自.column2因为至少就该小提琴中的代码而言，这并不是严格必要的，而且我还删除了从table.focus .column2因为过渡属性只是来自常规样式.column2将立即启动focus删除类以便将列转换回隐藏状态，因此当表具有focus类实际上是不必要的。事实上，这种风格从来没有真正做任何事情。
Edit:当第二列隐藏时，您可能仍然会看到第一列和最后一列之间有一个小间隙。这实际上不是第二列（或其单元格）的宽度。相反，这是由border-spacing and border-collapse整个表的浏览器默认属性。
至少在 Chrome 中，你有border-collapse set to separate and a 2px值设置为border-spacing默认情况下。更改这些属性中的任何一个都将有效地消除列之间的间隙：
/* either */
table {
border-collapse: collapse;
}
/* or */
table {
border-spacing: 0px;
}
Setting border-collapse: collapse会给我们一个更干净的外观，但我们也可以改变border-spacing属性，而我们在那里（即使它不做任何折叠边框），因为没有间距是我们真正追求的。然后我们还剩下一个问题，即当第二列被隐藏时，表格中间的边框较粗，这是由双边框引起的——第一列的右边框和第三列的左边框。为了清理它，我们可以设置一个0px border-width第一列的右边框。我们的最终解决方案如下所示：
table {
border-spacing: 0px;
border-collapse: collapse;
}
.column1 {
border-right-width: 0px;
}
Note:自从background-color你的第二列的颜色与你的相同border-color，当第二列展开时，您无法判断第一列缺少右边框。但是，如果您希望它们具有不同的颜色，那么当第二列可见时，您将能够注意到缺少的右边框。要解决这个问题，您可以在表格具有以下内容时再添加一种样式focus class:
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;
}
<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>
