Hide table columns by class - html

Question

I have a table from n columns. Each cell has a class column-n.
I want to add on table class hide-column-n and hide all cells with class column-n.
Is this possible do it through css?
Example:
.table {
border: 1px solid black;
}
.table thead{
background-color: lightgray;
}
.table td{
border: 1px solid gray;
width: 50px;
}
<table class="table">
<thead>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
</thead>
<tbody>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
<tr>
<td>...</td>
</tr>
</tbody>
</table>

Answer 1

Here is example https://jsfiddle.net/xr21kwrh/
<table class="table">
<thead>
<tr>
<th class=column-1">One</th>
<th class"column-2">Two</th>
...
<th class="column-n">N</th>
</tr>
</thead>
<tbody>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
...
</tbody>
</table>
<style>
th:nth-child(2){display: none;}
td:nth-child(2){display: none;}
</style>

Answer 2

<table class="table">
<thead>
<tr>
<th class=column-1">One</th>
<th class"column-2">Two</th>
...
<th class="column-n">N</th>
</tr>
</thead>
<tbody>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
...
</tbody>
</table>
<style>
.column-n{ display-none !important; }
</style>

Answer 3

If you use sass/scss you can do so (in SCSS):
#for $i from 1 through 10 {
.hide-column-#{$i} .column-#{$i} {
display: none;
}
}
it will compile to:
.hide-column-1 .column-1 {
display: none;
}
.hide-column-2 .column-2 {
display: none;
}
....
.hide-column-n .column-n {
display: none;
}
then use it like expected:
<table class="table hide-column-1 hide-column-2">
codepen demo here