我希望表格包含table-layout:fixed;
和<colgroup></colgroup>
。
隐藏列后,我希望我的表格宽度为100%。但我的桌子宽度变小了。如何让我的桌子保持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();
}
});
}
&#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;
答案 0 :(得分:4)
您可以尝试将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();
}
});
}
&#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;
答案 1 :(得分:0)
尝试
#table{
width:100%!important;
table-layout:fixed!important;
min-width:100%
}