问题
I have multiple tables which are in one row.
When one is selected, it should expand one (until now hidden) column.
When it is deselected, it should shrink slowly.
I tried it with an CSS Transition, but when there is no text in the cell, the shrinking doesn't work.
.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;
}
I made a fiddle with an example code.
Another thing, when I set the width for the first column and expand the second column, the width of the first column also changed slightly.
And I can't set the width of a cell to 0. Is there a solution which work with all browsers?
回答1:
Updated fiddle.
Your middle column cells were still showing slightly because they had padding and borders that were being displayed. So to fix that, we set the padding and border-width to 0, then add them when the focus class is applied:
.column2 {
padding: 0;
border-width: 0;
}
table.focus .column2 {
padding: 1px;
border-width: 1px;
}
The transition problem for empty cells can be solved by transitioning both the width and max-width:
.column2 {
transition: width 1.5s ease, max-width 1.5s ease;
}
Those two things added in, the issue of the first row's cells changing sizes slightly seems to fix itself, so far as I can tell.
Other updates I made included removing the visibility property from .column2 because it wasn't strictly necessary at least as far as the code in that fiddle was concerned, and I also removed the transitions from table.focus .column2 because the transition property from just the regular styles for .column2 will kick in as soon as the focus class is removed in order to transition the column back to hidden, so adding the transition property to the cells again for when the table has the focus class is actually unnecessary. In fact, that style was never actually doing anything.
Edit: You may still see a small gap between the first and last column when the second column is hidden. This is not actually a width on the second column (or its cells). Rather, this is caused by the border-spacing and border-collapse properties that are browser defaults for the whole table.
At least in Chrome, you have border-collapse set to separate and a 2px value set for border-spacing by default. Changing either of these properties will effectively remove the gap between the columns:
/* either */
table {
border-collapse: collapse;
}
/* or */
table {
border-spacing: 0px;
}
Setting border-collapse: collapse will give us a cleaner look, but we may as well also change the border-spacing property while we're at it (even if it doesn't do anything with collapsed borders), since no spacing is what we're really after. Then we have one remaining problem of a thicker border in the middle of the table while the second column is hidden, which is caused by a double border – the right border of the first column, and the left border of the third column. To clean that up, we can set a 0px border-width for the right border on the first column. Our final solution looks like this:
table {
border-spacing: 0px;
border-collapse: collapse;
}
.column1 {
border-right-width: 0px;
}
Note: Since the background-color on your second column is the same color as your border-color, you can't tell that the right border is missing from the first column when the second column expands. However, if you wanted them to have different colors, then you'd be able to notice the missing right border when the second column is visible. To fix that, you'd add one more style for when your table has the 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>来源：https://stackoverflow.com/questions/44290429/css-transition-with-tables