テーブルを使用したCSSの遷移

Question

複数のテーブルが1つの行にあります。 1つを選択すると、1つ（現在は非表示になっています）の列が展開されます。 選択を解除すると、ゆっくりと収縮します。 CSSトランジションで試してみましたが、セルにテキストがない場合、縮小は機能しません。

.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のコード例を作成しました。

もう一つは、私が最初の列の幅を設定し、2番目の列を展開すると、最初の列の幅も若干変更。

そして、私は0に、セルの幅を設定することはできませんが、すべてのブラウザで動作する解決策はありますか？

Answer 1

Updated fiddle。彼らが表示されていたパディングとボーダーを持っていたので

あなたの真ん中の列のセルには、まだ少し示していました。空のセルのための

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

遷移問題がwidthとmax-widthの両方を移行することによって解決することができます：

だから、これを修正するために、我々は paddingと 0から border-width focusクラスが適用されると、その後、それらを追加設定しましたで追加

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

これら二つのことは、多少のサイズを変更する最初の行のセルの問題は、これまで私が言うことができるように、自分自身を修正するようです。それは、少なくとも限りそのフィドルのコードを心配していたとして、厳密には必要ではなかった、と私もちょうどからの移行プロパティのでtable.focus .column2からの遷移を削除するので.column2からvisibilityプロパティを削除含ま私が作った

その他のアップデート.column2の通常のスタイルは、列を非表示に戻すためにfocusクラスが削除されるとすぐにキックインされるため、表にfocusクラスがある場合に再びセルに遷移プロパティを追加するのは実際は不要です。実際、そのスタイルは実際には何もしていませんでした。

編集： 2番目の列が隠されているとき、あなたはまだ最初と最後の列の間に小さなギャップを見ることができます。これは実際には2番目の列（またはそのセル）の幅ではありません。むしろ、これはテーブル全体のブラウザのデフォルトであるborder-spacingとborder-collapseのプロパティによって引き起こされます。

少なくともChromeでは、border-collapseはseparateに、2pxの値はデフォルトでborder-spacingに設定されています。これらのプロパティのいずれかを変更すると、効果的に列の間のギャップを削除します：border-collapse: collapseの設定

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

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

は私たちにきれいな外観を与えるだろうが、我々はそれをしている間、我々としてもまたborder-spacingプロパティを変更することがあり（でもそれならば私たちが実際に何をしているのか分からないので、折りたたまれたボーダーでは何もしません）。次に、表の中央に太い境界線が1つ残っている問題が残りますが、第2列は非表示になります。これは、第1列の右境界線と第3列の左境界線の二重境界によって引き起こされます。これを消去するには、最初の列の右側の境界に0pxborder-widthを設定します。

table { 
    border-spacing: 0px; 
    border-collapse: collapse; 
} 
.column1 { 
    border-right-width: 0px; 
} 

注：あなたの2列目background-colorあなたborder-colorと同じ色なので、あなたは右の境界線がときに最初の列から欠落していることを伝えることができない私たちの最終的な解決策は、このようになります2番目の列が展開されます。ただし、色を変えたい場合は、2番目の列が表示されているときに右端の枠が見つからないことがあります。おかげで今のところ、ほぼ完全な

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>