Hiding a Table Column

Hides a table column and the related header.

by mrrodd

HTML

<table id="foo">
    <thead>
        <tr><th>One</th><th>Two</th><th>Three</th><th>Four</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    </tbody>
</table>
<button onclick='document.getElementById("foo").classList.toggle("hide")'>Toggle Column 2</button>

CSS

body {
    font-family: Arial;
    font-size: 0.85em;
}
#foo td, th {
    padding: 0.5em;
    border: 1px solid blue;
}

#foo.hide tr *:nth-child(2) {
    display: none;
}