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>
This question is related to
jquery
html
hide
html-table
show
The answer is
The following is building on Eran's code, with a few minor changes. Tested it and it seems to work fine on Firefox 3, IE7.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var index = $(this).attr('name').substr(3);
index--;
$('table tr').each(function() {
$('td:eq(' + index + ')',this).toggle();
});
$('th.' + $(this).attr('name')).toggle();
});
});
</script>
<body>
<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>
</body>
</html>
Without class? You can use the Tag then:
var tds = document.getElementsByTagName('TD'),i;
for (i in tds) {
tds[i].style.display = 'none';
}
And to show them use:
...style.display = 'table-cell';
One line of code using jQuery which hides the 2nd column:
$('td:nth-child(2)').hide();
If your table has header(th), use this:
$('td:nth-child(2),th:nth-child(2)').hide();
Source: Hide a Table Column with a Single line of jQuery code
jsFiddle to test the code: http://jsfiddle.net/mgMem/1/
If you want to see a good use case, take a look at my blog post:
Hide a table column and colorize rows based on value with jQuery.
And of course, the CSS only way for browsers that support nth-child:
table td:nth-child(2) { display: none; }
This is for IE9 and newer.
For your usecase, you'd need several classes to hide the columns:
.hideCol1 td:nth-child(1) { display: none;}
.hideCol2 td:nth-child(2) { display: none;}
ect...
The following should do it:
$("input[type='checkbox']").click(function() {
var index = $(this).attr('name').substr(2);
$('table tr').each(function() {
$('td:eq(' + index + ')',this).toggle();
});
});
This is untested code, but the principle is that you choose the table cell in each row that corresponds to the chosen index extracted from the checkbox name. You could of course limit the selectors with a class or an ID.
you could use colgroups:
<table>
<colgroup>
<col class="visible_class"/>
<col class="visible_class"/>
<col class="invisible_class"/>
</colgroup>
<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>
your script then could change just the desire <col> class.
<p><input type="checkbox" name="ch1" checked="checked" /> First Name</p>
....
<td class="ch1">...</td>
<script>
$(document).ready(function() {
$('#demo').multiselect();
});
$("input:checkbox:not(:checked)").each(function() {
var column = "table ." + $(this).attr("name");
$(column).hide();
});
$("input:checkbox").click(function(){
var column = "table ." + $(this).attr("name");
$(column).toggle();
});
</script>
The following is building on Eran's code, with a few minor changes. Tested it and it seems to work fine on Firefox 3, IE7.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var index = $(this).attr('name').substr(3);
index--;
$('table tr').each(function() {
$('td:eq(' + index + ')',this).toggle();
});
$('th.' + $(this).attr('name')).toggle();
});
});
</script>
<body>
<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>
</body>
</html>
you could use colgroups:
<table>
<colgroup>
<col class="visible_class"/>
<col class="visible_class"/>
<col class="invisible_class"/>
</colgroup>
<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>
your script then could change just the desire <col> class.
The following should do it:
$("input[type='checkbox']").click(function() {
var index = $(this).attr('name').substr(2);
$('table tr').each(function() {
$('td:eq(' + index + ')',this).toggle();
});
});
This is untested code, but the principle is that you choose the table cell in each row that corresponds to the chosen index extracted from the checkbox name. You could of course limit the selectors with a class or an ID.
One line of code using jQuery which hides the 2nd column:
$('td:nth-child(2)').hide();
If your table has header(th), use this:
$('td:nth-child(2),th:nth-child(2)').hide();
Source: Hide a Table Column with a Single line of jQuery code
jsFiddle to test the code: http://jsfiddle.net/mgMem/1/
If you want to see a good use case, take a look at my blog post:
Hide a table column and colorize rows based on value with jQuery.
The following is building on Eran's code, with a few minor changes. Tested it and it seems to work fine on Firefox 3, IE7.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var index = $(this).attr('name').substr(3);
index--;
$('table tr').each(function() {
$('td:eq(' + index + ')',this).toggle();
});
$('th.' + $(this).attr('name')).toggle();
});
});
</script>
<body>
<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>
</body>
</html>
<p><input type="checkbox" name="ch1" checked="checked" /> First Name</p>
....
<td class="ch1">...</td>
<script>
$(document).ready(function() {
$('#demo').multiselect();
});
$("input:checkbox:not(:checked)").each(function() {
var column = "table ." + $(this).attr("name");
$(column).hide();
});
$("input:checkbox").click(function(){
var column = "table ." + $(this).attr("name");
$(column).toggle();
});
</script>
you could use colgroups:
<table>
<colgroup>
<col class="visible_class"/>
<col class="visible_class"/>
<col class="invisible_class"/>
</colgroup>
<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>
your script then could change just the desire <col> class.
The following is building on Eran's code, with a few minor changes. Tested it and it seems to work fine on Firefox 3, IE7.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var index = $(this).attr('name').substr(3);
index--;
$('table tr').each(function() {
$('td:eq(' + index + ')',this).toggle();
});
$('th.' + $(this).attr('name')).toggle();
});
});
</script>
<body>
<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>
</body>
</html>
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.
Working Demo in jsFiddle & Stack Snippets:
$(function() {_x000D_
// on init_x000D_
$(".table-hideable .hide-col").each(HideColumnIndex);_x000D_
_x000D_
// on click_x000D_
$('.hide-column').click(HideColumnIndex)_x000D_
_x000D_
function HideColumnIndex() {_x000D_
var $el = $(this);_x000D_
var $cell = $el.closest('th,td')_x000D_
var $table = $cell.closest('table')_x000D_
_x000D_
// get cell location - https://stackoverflow.com/a/4999018/1366033_x000D_
var colIndex = $cell[0].cellIndex + 1;_x000D_
_x000D_
// find and hide col index_x000D_
$table.find("tbody tr, thead tr")_x000D_
.children(":nth-child(" + colIndex + ")")_x000D_
.addClass('hide-col');_x000D_
_x000D_
// show restore footer_x000D_
$table.find(".footer-restore-columns").show()_x000D_
}_x000D_
_x000D_
// restore columns footer_x000D_
$(".restore-columns").click(function(e) {_x000D_
var $table = $(this).closest('table')_x000D_
$table.find(".footer-restore-columns").hide()_x000D_
$table.find("th, td")_x000D_
.removeClass('hide-col');_x000D_
_x000D_
})_x000D_
_x000D_
$('[data-toggle="tooltip"]').tooltip({_x000D_
trigger: 'hover'_x000D_
})_x000D_
_x000D_
})body {_x000D_
padding: 15px;_x000D_
}_x000D_
_x000D_
.table-hideable td,_x000D_
.table-hideable th {_x000D_
width: auto;_x000D_
transition: width .5s, margin .5s;_x000D_
}_x000D_
_x000D_
.btn-condensed.btn-condensed {_x000D_
padding: 0 5px;_x000D_
box-shadow: none;_x000D_
}_x000D_
_x000D_
_x000D_
/* use class to have a little animation */_x000D_
.hide-col {_x000D_
width: 0px !important;_x000D_
height: 0px !important;_x000D_
display: block !important;_x000D_
overflow: hidden !important;_x000D_
margin: 0 !important;_x000D_
padding: 0 !important;_x000D_
border: none !important;_x000D_
}<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">_x000D_
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">_x000D_
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">_x000D_
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>_x000D_
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
_x000D_
_x000D_
_x000D_
_x000D_
<table class="table table-condensed table-hover table-bordered table-striped table-hideable">_x000D_
_x000D_
<thead>_x000D_
<tr>_x000D_
<th>_x000D_
Controller_x000D_
<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">_x000D_
<i class="fa fa-eye-slash"></i> _x000D_
</button>_x000D_
</th>_x000D_
<th class="hide-col">_x000D_
Action_x000D_
<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">_x000D_
<i class="fa fa-eye-slash"></i> _x000D_
</button>_x000D_
</th>_x000D_
<th>_x000D_
Type_x000D_
<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">_x000D_
<i class="fa fa-eye-slash"></i> _x000D_
</button>_x000D_
</th>_x000D_
<th>_x000D_
Attributes_x000D_
<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">_x000D_
<i class="fa fa-eye-slash"></i> _x000D_
</button>_x000D_
</th>_x000D_
</thead>_x000D_
<tbody>_x000D_
_x000D_
<tr>_x000D_
<td>Home</td>_x000D_
<td>Index</td>_x000D_
<td>ActionResult</td>_x000D_
<td>Authorize</td>_x000D_
</tr>_x000D_
_x000D_
<tr>_x000D_
<td>Client</td>_x000D_
<td>Index</td>_x000D_
<td>ActionResult</td>_x000D_
<td>Authorize</td>_x000D_
</tr>_x000D_
_x000D_
<tr>_x000D_
<td>Client</td>_x000D_
<td>Edit</td>_x000D_
<td>ActionResult</td>_x000D_
<td>Authorize</td>_x000D_
</tr>_x000D_
_x000D_
</tbody>_x000D_
<tfoot class="footer-restore-columns">_x000D_
<tr>_x000D_
<th colspan="4"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>_x000D_
</tr>_x000D_
</tfoot>_x000D_
</table>you could use colgroups:
<table>
<colgroup>
<col class="visible_class"/>
<col class="visible_class"/>
<col class="invisible_class"/>
</colgroup>
<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>
your script then could change just the desire <col> class.
The following should do it:
$("input[type='checkbox']").click(function() {
var index = $(this).attr('name').substr(2);
$('table tr').each(function() {
$('td:eq(' + index + ')',this).toggle();
});
});
This is untested code, but the principle is that you choose the table cell in each row that corresponds to the chosen index extracted from the checkbox name. You could of course limit the selectors with a class or an ID.
And of course, the CSS only way for browsers that support nth-child:
table td:nth-child(2) { display: none; }
This is for IE9 and newer.
For your usecase, you'd need several classes to hide the columns:
.hideCol1 td:nth-child(1) { display: none;}
.hideCol2 td:nth-child(2) { display: none;}
ect...
The following should do it:
$("input[type='checkbox']").click(function() {
var index = $(this).attr('name').substr(2);
$('table tr').each(function() {
$('td:eq(' + index + ')',this).toggle();
});
});
This is untested code, but the principle is that you choose the table cell in each row that corresponds to the chosen index extracted from the checkbox name. You could of course limit the selectors with a class or an ID.
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.
Working Demo in jsFiddle & Stack Snippets:
$(function() {_x000D_
// on init_x000D_
$(".table-hideable .hide-col").each(HideColumnIndex);_x000D_
_x000D_
// on click_x000D_
$('.hide-column').click(HideColumnIndex)_x000D_
_x000D_
function HideColumnIndex() {_x000D_
var $el = $(this);_x000D_
var $cell = $el.closest('th,td')_x000D_
var $table = $cell.closest('table')_x000D_
_x000D_
// get cell location - https://stackoverflow.com/a/4999018/1366033_x000D_
var colIndex = $cell[0].cellIndex + 1;_x000D_
_x000D_
// find and hide col index_x000D_
$table.find("tbody tr, thead tr")_x000D_
.children(":nth-child(" + colIndex + ")")_x000D_
.addClass('hide-col');_x000D_
_x000D_
// show restore footer_x000D_
$table.find(".footer-restore-columns").show()_x000D_
}_x000D_
_x000D_
// restore columns footer_x000D_
$(".restore-columns").click(function(e) {_x000D_
var $table = $(this).closest('table')_x000D_
$table.find(".footer-restore-columns").hide()_x000D_
$table.find("th, td")_x000D_
.removeClass('hide-col');_x000D_
_x000D_
})_x000D_
_x000D_
$('[data-toggle="tooltip"]').tooltip({_x000D_
trigger: 'hover'_x000D_
})_x000D_
_x000D_
})body {_x000D_
padding: 15px;_x000D_
}_x000D_
_x000D_
.table-hideable td,_x000D_
.table-hideable th {_x000D_
width: auto;_x000D_
transition: width .5s, margin .5s;_x000D_
}_x000D_
_x000D_
.btn-condensed.btn-condensed {_x000D_
padding: 0 5px;_x000D_
box-shadow: none;_x000D_
}_x000D_
_x000D_
_x000D_
/* use class to have a little animation */_x000D_
.hide-col {_x000D_
width: 0px !important;_x000D_
height: 0px !important;_x000D_
display: block !important;_x000D_
overflow: hidden !important;_x000D_
margin: 0 !important;_x000D_
padding: 0 !important;_x000D_
border: none !important;_x000D_
}<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">_x000D_
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">_x000D_
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">_x000D_
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>_x000D_
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
_x000D_
_x000D_
_x000D_
_x000D_
<table class="table table-condensed table-hover table-bordered table-striped table-hideable">_x000D_
_x000D_
<thead>_x000D_
<tr>_x000D_
<th>_x000D_
Controller_x000D_
<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">_x000D_
<i class="fa fa-eye-slash"></i> _x000D_
</button>_x000D_
</th>_x000D_
<th class="hide-col">_x000D_
Action_x000D_
<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">_x000D_
<i class="fa fa-eye-slash"></i> _x000D_
</button>_x000D_
</th>_x000D_
<th>_x000D_
Type_x000D_
<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">_x000D_
<i class="fa fa-eye-slash"></i> _x000D_
</button>_x000D_
</th>_x000D_
<th>_x000D_
Attributes_x000D_
<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">_x000D_
<i class="fa fa-eye-slash"></i> _x000D_
</button>_x000D_
</th>_x000D_
</thead>_x000D_
<tbody>_x000D_
_x000D_
<tr>_x000D_
<td>Home</td>_x000D_
<td>Index</td>_x000D_
<td>ActionResult</td>_x000D_
<td>Authorize</td>_x000D_
</tr>_x000D_
_x000D_
<tr>_x000D_
<td>Client</td>_x000D_
<td>Index</td>_x000D_
<td>ActionResult</td>_x000D_
<td>Authorize</td>_x000D_
</tr>_x000D_
_x000D_
<tr>_x000D_
<td>Client</td>_x000D_
<td>Edit</td>_x000D_
<td>ActionResult</td>_x000D_
<td>Authorize</td>_x000D_
</tr>_x000D_
_x000D_
</tbody>_x000D_
<tfoot class="footer-restore-columns">_x000D_
<tr>_x000D_
<th colspan="4"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>_x000D_
</tr>_x000D_
</tfoot>_x000D_
</table>Source: Stackoverflow.com