CODEWITHSUNDEEP
javascriptjquerycsscss-transitions
Pradeep Kumar
Pradeep Kumar

Reputation: 31

CSS Transition not working in table colgroup

Transition doesn't work when colgroup width changes.

$('#but').click(function() {
  if ($('table col').hasClass("expanded"))
    $('table col').removeClass('expanded');
  else
    $('table col').addClass('expanded');
});
table,
th,
td {
  border: 1px solid black;
}
table col {
  -webkit-transition: width .8s ease;
  -moz-transition: width .8s ease;
  -ms-transition: width .8s ease;
  -o-transition: width .8s ease;
  transition: width .8s ease;
}
.expanded {
  width: 200px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button id="but">Button</button>

<table>
  <colgroup>
    <col></col>
    <col></col>
  </colgroup>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>

</table>

I was using this code. In this code THE CSS Transition property will not work. transition: width .8s ease;

Upvotes: 0

Views: 901

Answers (2)

Raoulito
Raoulito

Reputation: 361

A simple workaround is to use a min-width property.

Since a transition needs a fixed value to work, give width: 0px; and min-width: auto; to your element, and because min-width properties are more important than width, your element looks the same, and your transition smooothly runs.

table col {
    min-width: auto;
    width: 0px;
    -webkit-transition: width .8s ease-in-out;
    -moz-transition: width .8s ease-in-out;
    -ms-transition: width .8s ease-in-out;
    -o-transition: width .8s ease-in-out;
    transition: width .8s ease-in-out;
}

See this fiddle!

Upvotes: 2

SidOfc
SidOfc

Reputation: 4584

A CSS transition needs to be able to calculate the difference between the starting point and the ending point to be able to transition it. If no width is given then the width will default to auto, from auto you cannot animate to a fixed value like 200px because auto can be anything.

Applying a basic width property to the table col selector with a default value of 100px solves the issue because now the browser understands what it is you want to do.

$('#but').click(function() {
  if ($('table col').hasClass("expanded"))
    $('table col').removeClass('expanded');
  else
    $('table col').addClass('expanded');
});
table,
th,
td {
  border: 1px solid black;
}
table col {
  width: 100px;
  -webkit-transition: width .8s ease;
  -moz-transition: width .8s ease;
  -ms-transition: width .8s ease;
  -o-transition: width .8s ease;
  transition: width .8s ease;
}
.expanded {
  width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button id="but">Button</button>

<table>
  <colgroup>
    <col></col>
    <col></col>
  </colgroup>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>

</table>

Upvotes: 3

Related Questions