The width of a table row changes after I collapse and expand it
Question
I am new to Javascript and CSS, I try to expand/collapse table rows using JavaScript.
And, I use CSS to change the style of my tables.
Here comes my code snippet:
<html>
<head>
<script>
function ShowSubTable(titleRow)
{
var nextRow = titleRow.nextSibling;
while (nextRow != null)
{
if( nextRow.tagName != 'TR' ){
nextRow = nextRow.nextSibling;
continue;
}
if (nextRow.style.display == 'none')
{
nextRow.style.display = 'block';
}
else
{
nextRow.style.display = 'none';
}
break;
}
}
</script>
<style>
table.tlb
{
width: 100%;
}
table.tlb th
{
background: #E8C993;
font-size: 22px;
}
table.tlb td
{
background: #FFEAAF;
font-size: 16px;
}
</style>
</head>
<body>
<table class="tlb">
<tr onclick="ShowSubTable(this)">
<th>abc</th>
</tr>
<tr>
<td>123</td>
</tr>
<tr onclick="ShowSubTable(this)">
<th>def</th>
</tr>
<tr>
<td>456</td>
</tr>
</table>
</body>
</html>
The expand/collapse function works fine. But there is a problem.
The width of my table is 100% at the beginning. However, after I collapse a table row and expand it. the width of the table row is not 100%.
How to fix the problem?
Thanks in advance.
1 answers
solution1
2 ACCPTED 2013-10-02 16:25:09
you should just restore the default display value when you show tr elements
nextRow.style.display = 'table-row';
instead of
nextRow.style.display = 'block';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.