javascript - 隐藏空列后保持表格 100% 宽度

Question

我希望表格有 table-layout:fixed;和 <colgroup></colgroup> .

隐藏列后，我希望表格宽度为 100%。但是我的 table 宽度变小了。我怎样才能让我的 table 保持 100% 的宽度？这是我的代码:

Jsfiddle Example

$( "#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>

Answer 1

您可以尝试将 width:100% 设置为 th 和 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>