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.

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

}
```

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

}
```

```html
<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?

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

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

}
table {
  border-collapse: collapse;
}
```

```html
<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>
```