Keep table 100% wide after hiding empty columns
I want the table to have table-layout:fixed;
and <colgroup></colgroup>
.
After hiding the columns, I want my table width to be 100%. But the width of the table is getting smaller. How can I get the table to maintain 100% width? Here is my code:
$( "#button1" ).click(function() { hide('table1'); });
$( "#button2" ).click(function() { show('table1'); });
function hide(tableid)
{
$('#'+tableid+' th').each(function(i) {
var bool = true;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')');
tds.each( function(j) {
if (this.innerHTML != '') {bool=false;return false;};
});
if (bool)
{
$(this).hide();
tds.hide();
}
});
}
function show(tableid)
{
$('#'+tableid+' th').each(function(i) {
var bool = true;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')');
tds.each( function(j) {
if (this.innerHTML != '') {bool=false;return false;};
});
if (bool)
{
$(this).show();
tds.show();
}
});
}
#table1 {width:100%; table-layout:fixed;}
#table1 td,th{border:1px solid;}
button{margin-top:20px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="table1">
<colgroup><col><col><col><col></colgroup>
<tr><th>th1</th><th>th2</th><th>th3</th><th>th4</th></tr>
<tr><td>Cell1</td><td></td><td>Cell3</td><td>Cell4</td></tr>
<tr><td></td><td></td><td>Cell3</td><td>Cell4</td></tr>
<tr><td>Cell1</td><td></td><td></td><td>Cell4</td></tr>
<tr><td>Cell1</td><td></td><td>Cell3</td><td></td></tr>
</table>
<button id="button1">Hide</button>
<button id="button2">Show</button>
+3
source to share
2 answers
You can try installing width:100%
on th
and td
.
#table1 th, #table1 td {border:1px solid; width:100%;}
$( "#button1" ).click(function() { hide('table1'); });
$( "#button2" ).click(function() { show('table1'); });
function hide(tableid)
{
$('#'+tableid+' th').each(function(i) {
var bool = true;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')');
tds.each( function(j) {
if (this.innerHTML != '') {bool=false;return false;};
});
if (bool)
{
$(this).hide();
tds.hide();
}
});
}
function show(tableid)
{
$('#'+tableid+' th').each(function(i) {
var bool = true;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')');
tds.each( function(j) {
if (this.innerHTML != '') {bool=false;return false;};
});
if (bool)
{
$(this).show();
tds.show();
}
});
}
#table1 {width:100%; table-layout:fixed;}
#table1 th, #table1 td {border:1px solid; width:100%;}
button{margin-top:20px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="table1">
<colgroup><col><col><col><col></colgroup>
<tr><th>th1</th><th>th2</th><th>th3</th><th>th4</th></tr>
<tr><td>Cell1</td><td></td><td>Cell3</td><td>Cell4</td></tr>
<tr><td></td><td></td><td>Cell3</td><td>Cell4</td></tr>
<tr><td>Cell1</td><td></td><td></td><td>Cell4</td></tr>
<tr><td>Cell1</td><td></td><td>Cell3</td><td></td></tr>
</table>
<button id="button1">Hide</button>
<button id="button2">Show</button>
+4
source to share