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

时间:2015-06-06 13:16:04

标签: javascript jquery html css

我希望表格包含table-layout:fixed;<colgroup></colgroup>

隐藏列后,我希望我的表格宽度为100%。但我的桌子宽度变小了。如何让我的桌子保持100%的宽度?这是我的代码:

Jsfiddle Example

&#13;
&#13;
$( "#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();
		}		
	});
}
&#13;
#table1 {width:100%; table-layout:fixed;}
#table1 td,th{border:1px solid;}

button{margin-top:20px;}
&#13;
<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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:4)

您可以尝试将width:100%设置为thtd

#table1 th, #table1 td {border:1px solid; width:100%;}

&#13;
&#13;
$( "#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();
		}		
	});
}
&#13;
#table1 {width:100%; table-layout:fixed;}
#table1 th, #table1 td {border:1px solid; width:100%;}

button{margin-top:20px;}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

尝试

#table{
  width:100%!important;
  table-layout:fixed!important;
  min-width:100%
}