How to animate td column visibility with CSS3

Question

We have to hide a td column after n seconds (immediately) via CSS, when a class is applied to it; for example the column 2 in following snippet:

<table>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
</table>

We have already tried to play with 'visibility' and 'opacity' it works with div , but with td since the with visibility it maintain a width it doesn't work

In the following snippet the display is applied immediately instead of after to n seconds.

function HideColumn() {
  var el = document.getElementById('columntarget');
  el.className += 'hideColumn';


}

.hideColumn {
  display: none;
  transition: display 2s step-end;
}
td {
  width: 50px;
  
}

<table>
  <tr>
    <td style='background-color:red;'>column 1</td>
    <td style='background-color:yellow;' id="columntarget">column 2</td>
    <td style='background-color:blue;'>column 3</td>
  </tr>
</table>

<button onclick='HideColumn()'>Hide
  </button>

Any suggestion?

EDIT:

The @Harry snippet works fine, but what happen if we set the table width?

function HideColumn() {
  var el = document.getElementById('columntarget');
  el.className += 'hideColumn';
}

.hideColumn {
  width: 0px;
  overflow: hidden;
  transition: all 2s step-end;
}
div {
  width: 50px;
}
td {
  padding: 0px;
  
}
table {
  border-collapse: collapse;
}

<table style='width:500px;' border=1>
  <tr>
    <td>
      <div style='background-color:red;'>column 1</div>
    </td>
    <td style='width:auto'>
      <div style='background-color:blue;'>column 3</div>
    </td>
    <td>
      <div style='background-color:yellow;' id="columntarget">column 2</div>
    </td>
  </tr>
</table>

<button onclick='HideColumn()'>Hide
</button>

Answer 1

The display property of an element is not a transitionable or animatable property and so any change to that property's value will happen immediately regardless of any duration or delay that is set to it via the transition property.

You can do it like in the below snippet by setting the class to a div child of the td.

Notes:

• If you don't set border-collapse: collapse (that is, the borders are separate) then the border in between the td will look like it has doubled because even though the 2nd td has become 0px wide, the td is still there and so the border will still be present.
• The td elements by default get a 1px padding on all four sides (atleast in Chrome) and this also produces a space which can be nullified by using padding: 0px on the td.

function HideColumn() {
  var el = document.getElementById('columntarget');
  el.className += 'hideColumn';
}

.hideColumn {
  width: 0px;
  overflow: hidden;
  transition: all 2s step-end;
}
div {
  width: 50px;
}
td {
  padding: 0px;
}
table {
  border-collapse: collapse;
}

<table>
  <tr>
    <td>
      <div style='background-color:red;'>column 1</div>
    </td>
    <td>
      <div style='background-color:yellow;' id="columntarget">column 2</div>
    </td>
    <td>
      <div style='background-color:blue;'>column 3</div>
    </td>
  </tr>
</table>

<button onclick='HideColumn()'>Hide
</button>

---

I didn't fully understand what is the problem when table has been assigned a width because the td still hides after a delay. If you are referring to the two remaining columns expanding to occupy the full width then that can be addressed by doing the following:

• Set table-layout: fixed; to the table.
• Add a width (equal to the div width) to the td also.
• Apply the .hideColumn class to td via JS and transition the width of both the td and the div.

function HideColumn() {
  var el = document.getElementById('columntarget');
  el.className += 'hideColumn';
}

.hideColumn > div {
  width: 0px;
  overflow: hidden;
  transition: all 2s step-end;
}
td, div {
  width: 50px;
  padding: 0px;
}
.hideColumn {
  width: 0px;
  transition: all 2s step-end;
}
table {
  border-collapse: collapse;
  table-layout: fixed;
}

<table style="width:500px;" border=1>
  <tr>
    <td>
      <div style='background-color:red;'>column 1</div>
    </td>
    <td style='width:auto'>
      <div style='background-color:blue;'>column 3</div>
    </td>
    <td id="columntarget">
      <div style='background-color:yellow;'>column 2</div>
    </td>
  </tr>
</table>

<button onclick='HideColumn()'>Hide
</button>

Answer 2

try with this below code it may help you

$("#hideBtn").click(function(){
  $("#columntarget").addClass("hideColumn");
});

#columntarget{
  background: yellow;
}

td {
  width: 50px;
}

.hideColumn{
    max-width:50px;
    overflow: hidden;
    background: yellow;
   -moz-animation: hide 1s ease 3.5s forwards;
   -webkit-animation: slide 1s ease 3.5s forwards;
   -o-animation: slide 1s ease 3.5s forwards;
   -ms-animation: slide 1s ease 3.5s forwards;
    animation: slide 1s ease 3.5s forwards;
}

@-webkit-keyframes slide /* Safari and Chrome */
{
from {max-width: 50px;}
to {max-width: 0px;}
}

@-moz-keyframes slide /* Safari and Chrome */
{
from {max-width: 50px;}
to {max-width: 0px;}
}
@keyframes slide
{
from {max-width: 50px;}
to {max-width: 0px;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td style='background-color:red;'>column 1</td>
    <td id="columntarget">column 2</td>
    <td style='background-color:blue;'>column 3</td>
  </tr>
</table>

<button id="hideBtn">Hide
  </button>