<table> <thead> <tr> <th>Lonnnnnng Header 1 <span><b>-</b></span></th> <th>Lonnnnnng Header 2 <span><b>-</b></span></th> <th>Lonnnnnng Header 3 <span><b>-</b></span></th> </tr> </thead> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 3</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> <td>row 2, cell 3</td> </tr> <tr> <td>row 3, cell 1</td> <td>row 3, cell 2</td> <td>row 3, cell 3</td> </tr> <tr> <td>row 4, cell 1</td> <td>row 4, cell 2</td> <td>row 4, cell 3</td> </tr> </table>
$(function() { // OPTIONAL : Adding some colours $('table tbody tr:odd').addClass('alt'); // OPTIONAL : changing row colour on hover $('table tbody tr').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); }); $('tr th').click(function() { // Get the index of clicked column var index = (this.cellIndex + 1); // Get all cells in that column var cells = $('table tr > :nth-child(' + index + ')'); cells.toggleClass('collapsed'); if ($(this).hasClass('collapsed')) { $(this).find('span').html('<b>+</b>'); } else { $(this).find('span').html('<b>-</b>'); } // Special case when all columns are collapsed if ($('table tr > th:not(.collapsed)').length) $('table').removeClass('collapsed'); else $('table').addClass('collapsed'); });
body { font-family: Sans-Serif; } table { width: 100%; border: solid 1px #888; border-collapse: collapse; table-layout: fixed; } table.collapsed { width: 0px; } th.collapsed { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 30px; } td.collapsed { overflow: hidden; white-space: nowrap; width: 30px; } table thead { background-color: #6E6E6E; color: #fff; } table td, table th { padding: 5px; border: solid 1px #888; } .alt { background-color: #ddd; } .hover { background-color: #81DAF5; }