Here's a little more fully featured answer that provides some user interaction on a per column basis.  If this is going to be a dynamic experience, there needs to be a clickable toggle on each column that indicates the ability to hide the column, and then a way to restore previously hidden columns.  

That would look something like this in JavaScript:



    $('.hide-column').click(function(e){
      var $btn = $(this);
      var $cell = $btn.closest('th,td')
      var $table = $btn.closest('table')

      // get cell location - https://stackoverflow.com/a/4999018/1366033
      var cellIndex = $cell[0].cellIndex + 1;

      $table.find(".show-column-footer").show()
      $table.find("tbody tr, thead tr")
            .children(":nth-child("+cellIndex+")")
            .hide()
    })

    $(".show-column-footer").click(function(e) {
        var $table = $(this).closest('table')
        $table.find(".show-column-footer").hide()
        $table.find("th, td").show()

    })

To support this, we'll add some markup to the table.  In each column header, we can add something like this to provide a visual indicator of something clickable



    <button class="pull-right btn btn-default btn-condensed hide-column" 
                data-toggle="tooltip" data-placement="bottom" title="Hide Column">
        <i class="fa fa-eye-slash"></i>  
    </button>

We'll allow the user to restore columns via a link in the table footer.  If it's not persistent by default, then toggling it on dynamically in the header could jostle around the table, but you can really put it anywhere you'd like:




    <tfoot class="show-column-footer">
       <tr>
        <th colspan="4"><a class="show-column" href="#">Some columns hidden - click to show all</a></th>
      </tr>
    </tfoot>

That's the basic functionality. Here's a demo below with a couple more things fleshed out. You can also add a tooltip to the button to help clarify its purpose, style the button a little more organically to a table header, and collapse the column width in order to add some (somewhat wonky) css animations to make the transition a little less jumpy.

[![Demo Screengrab][1]][1]


### Working Demo in [jsFiddle][2] & Stack Snippets: 





    $(function() {
      // on init
      $(".table-hideable .hide-col").each(HideColumnIndex);

      // on click
      $('.hide-column').click(HideColumnIndex)

      function HideColumnIndex() {
        var $el = $(this);
        var $cell = $el.closest('th,td')
        var $table = $cell.closest('table')

        // get cell location - https://stackoverflow.com/a/4999018/1366033
        var colIndex = $cell[0].cellIndex + 1;

        // find and hide col index
        $table.find("tbody tr, thead tr")
          .children(":nth-child(" + colIndex + ")")
          .addClass('hide-col');
          
        // show restore footer
        $table.find(".footer-restore-columns").show()
      }

      // restore columns footer
      $(".restore-columns").click(function(e) {
        var $table = $(this).closest('table')
        $table.find(".footer-restore-columns").hide()
        $table.find("th, td")
          .removeClass('hide-col');

      })

      $('[data-toggle="tooltip"]').tooltip({
        trigger: 'hover'
      })

    })



    body {
      padding: 15px;
    }

    .table-hideable td,
    .table-hideable th {
      width: auto;
      transition: width .5s, margin .5s;
    }

    .btn-condensed.btn-condensed {
      padding: 0 5px;
      box-shadow: none;
    }


    /* use class to have a little animation */
    .hide-col {
      width: 0px !important;
      height: 0px !important;
      display: block !important;
      overflow: hidden !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
    }



    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>




    <table class="table table-condensed table-hover table-bordered table-striped table-hideable">

      <thead>
        <tr>
          <th>
            Controller
            <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
              <i class="fa fa-eye-slash"></i>  
            </button>
          </th>
          <th class="hide-col">
            Action
            <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
              <i class="fa fa-eye-slash"></i>  
            </button>
          </th>
          <th>
            Type
            <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
              <i class="fa fa-eye-slash"></i>  
            </button>
          </th>
          <th>
            Attributes
            <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
              <i class="fa fa-eye-slash"></i>  
            </button>
          </th>
      </thead>
      <tbody>

        <tr>
          <td>Home</td>
          <td>Index</td>
          <td>ActionResult</td>
          <td>Authorize</td>
        </tr>

        <tr>
          <td>Client</td>
          <td>Index</td>
          <td>ActionResult</td>
          <td>Authorize</td>
        </tr>

        <tr>
          <td>Client</td>
          <td>Edit</td>
          <td>ActionResult</td>
          <td>Authorize</td>
        </tr>

      </tbody>
      <tfoot class="footer-restore-columns">
        <tr>
          <th colspan="4"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
        </tr>
      </tfoot>
    </table>



  [1]: https://i.stack.imgur.com/r0wDN.gif
  [2]: https://jsfiddle.net/KyleMit/rr96p4vv/

I have an HTML table with several columns and I need to implement a column chooser using jQuery.  When a user clicks on a checkbox I want to hide/show the corresponding column in the table.  I would like to do this without attaching a class to every td in the table, is there a way to select an entire column using jQuery?  Below is an example of the HTML.

    <table>
    	<thead>
    		<tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    	</thead>
        <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
        <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    	<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    	<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    </table>
    
    <form>
    	<input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    	<input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    	<input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
    </form>



Hide/Show Column in a HTML Table

This happens because the `first-child` selector wipes out the left border:

```css
td:first-child {
    border-left: 0;
}
```

Which is applied to the first cell in the second row:

[![Example Screenshot][1]][1]

Which actually feels like a reasonable interpretation of the spec.

If you can change the markup, the problem becomes much easier to address by manually adding a class to any cell you'd like to have a left border, but that's not super clean.

I can't think of any way for the selector on the second row to be aware of the `rowspan` on a child of the first row in order to conditionally remove the left border.

Any table border on the perimeter set to `none` or `1px solid white` will sit behind the table border of inner cells (when `border-collapse` is set to `collapse`) so you can't just give every cell the border and then remove from the table edges.

  [1]: https://i.stack.imgur.com/yrBBL.png

I have a table with left and right borders only on the inside cells, the following is the markup and CSS that I have:





    table {
      border-collapse: collapse;
    }

    td {
      border-left: 1px solid #aaa;
      border-bottom: 1px solid #aaa;
      border-top: 1px solid #aaa;
      padding: 10px;
    }

    td:first-child {
      border-left: 0;
    }



    <table>
      <tbody>
        <tr>
          <td rowspan="2">Cell with Rowspan</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
        </tr>
        <tr>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
        </tr>
        <tr>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
        </tr>
      </tbody>



The output works fine in Chrome but Firefox and IE (current version) does not display the left border of the cell in the second row

[![Screenshot example][1]][1]

Is there a problem with how I implemented it the CSS or should I just use classes on the 2nd row?

Here's a [working preview in codepen][2]


  [1]: https://i.stack.imgur.com/lWCMR.png
  [2]: http://codepen.io/anon/pen/osBrg/

Firefox table border issue on cells next to a rowspan

Use a big `box-shadow` and hide the overflow







    table {
        border-collapse: collapse;
    }
    table td, table th {
        border: 1px solid #ddd;
        padding: 8px;
    }
    td {
     overflow:hidden;
    }
    td > mark {
      display:inline-block;
      box-shadow: 0 0 0 50px yellow; 
    }



    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Type</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ranger</td>
          <td>Dog</td>
        </tr>
        <tr>
          <td><mark>Frida <br/> Kahtlo</mark></td>
          <td><mark>Cat</mark></td>
        </tr>
      </tbody>
    </table>

I have a `<td>` element with a little bit of padding, and I'd like to shade in the entire table cell when it's immediate child is a `<mark>` element.

I'm using markdown to generate the table itself, so simply adding a class like `<td class="highlight">` isn't really an option.

### Basic Table Setup

Here's a basic table setup

```html
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ranger</td>
      <td>Dog</td>
    </tr>
    <tr>
      <td><mark>Frida <br/> Kahtlo</mark></td>
      <td><mark>Cat</mark></td>
    </tr>
  </tbody>
</table>
```

With some basic CSS

```css
table {
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid #ddd;
    padding: 8px;
    position: relative;
}
```

### Attempt #1

One idea was to absolutely position the `<mark>` element and pin it to all four sides:

```css
td > mark {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 8px;
}
```

However, it doesn't seem possible to [set the parent parent height from an absolutely positioned child][1], so the contents overflows the `<td>`

[![example one][2]][2]





    table {
        border-collapse: collapse;
    }
    table td, table th {
        border: 1px solid #ddd;
        padding: 8px;
        position: relative;
    }

    td > mark {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        padding: 8px;
    }



    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Type</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ranger</td>
          <td>Dog</td>
        </tr>
        <tr>
          <td><mark>Frida <br/> Kahtlo</mark></td>
          <td><mark>Cat</mark></td>
        </tr>
      </tbody>
    </table>



### Attempt #2

Another idea was to reverse the padding with a negative margin like this:


```css
td > mark {
    display: block;
    margin: -8px;
    padding: 8px;
}
```

However, if there is a line wrap in another cell, I can't get the child element to occupy the full height available

[![example two][3]][3]






    table {
        border-collapse: collapse;
    }
    table td, table th {
        border: 1px solid #ddd;
        padding: 8px;
        position: relative;
    }

    td > mark {
        display: block;
        margin: -8px;
        padding: 8px;
    }



    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Type</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ranger</td>
          <td>Dog</td>
        </tr>
        <tr>
          <td><mark>Frida <br/> Kahtlo</mark></td>
          <td><mark>Cat</mark></td>
        </tr>
      </tbody>
    </table>



*Q: Any other ways that this might be possible?*

  [1]: https://stackoverflow.com/q/13545947/1366033
  [2]: https://i.stack.imgur.com/34qJP.png
  [3]: https://i.stack.imgur.com/dLx2U.png