我是新手，并学习如何使用HTML和脚本。
我采用了这个并定制它以满足我的需求。我注意到它在我的chrome浏览器中效果很好，但在Firefox中却没有。在firefox中，表格水平滑动，并且不会在垂直堆栈中保持它的位置。
我知道这不是最有效的代码 - 为此道歉。
<html>
<head>
<TITLE>Expandable and collapsible table - demo</TITLE>
<script type="text/javascript">
function toggle_visibility(tbid,lnkid)
{
if(document.all){document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block";}
else{document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "table" ? "none" : "table";}
document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse";
}
</script>
<style type="text/css">
#tbl1,#tbl2,#tbl3,#tbl4,#tbl5,#tbl6 {display:none;}
#lnk1,#lnk2,#lnk3,#lnk4,#lnk5,#lnk6 {border:none;background:none;width:85px;}
td {FONT-SIZE: 75%; MARGIN: 0px; COLOR: #000000;}
td {FONT-FAMILY: verdana,helvetica,arial,sans-serif}
a {TEXT-DECORATION: none;}
</style>
</head>
<body>
<table width="800px" border="0" align="left" cellpadding="4" cellspacing="0">
<tr height="1">
<td bgcolor="#727272" colspan="3"></td>
</tr>
<tr bgcolor="#FFFFFF" height="15">
<td><strong><font face="tahoma"><font size=4><font color=0C3C60>Achieving the Most With the People You Lead</font color=0C3C60></font size=6></font face="tahoma"></strong></td>
<td></td>
<td bgcolor="#FFFFFF" align="right"><input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"></td>
</tr>
<tr>
<td colspan="3">
<table width="800px" border="0" cellpadding="4" cellspacing="0" id="tbl1">
<tr>
<td colspan="3">
<ul>
<li><font face="arial"><font size=3>Why People Do What They Do
<li>What is Leadership
<li>Indicators of Leadership
<li>3 Big Gotchas
<li>Leaders Take the Arrows
<li>The Road to Abilene
<li>Builder or Wrecker
</ul>
</td>
</tr>
<table width="800px" border="0" align="left" cellpadding="4" cellspacing="0">
<tr height="1">
<td bgcolor="#727272" colspan="3"></td>
</tr>
<tr bgcolor="#FFFFFF" height="15">
<td><strong><font face="tahoma"><font size=4><font color=0C3C60>Correcting Behavior and Inspiring People</font color=0C3C60></font size=6></font face="tahoma"></strong></td>
<td bgcolor="#FFFFFF" align="right"><input id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"></td>
</tr>
<tr>
<td colspan="3">
<table width="800px" border="0" cellpadding="4" cellspacing="0" id="tbl2">
<tr>
<td colspan="3">
<ul>
<li><font face="arial"><font size=3>Correcting Self
<li>Using a Moral Compass
<li>Ethics and Honesty
<li>Know Yourself and Seek Self-Improvement
<li>Take Care of Your People
<li>Framework for Correction
<li>Praise in Public and Rebuke in Private
<li>Swift Correction / Dribble in Rewards
<li>Caged Lions
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="800px" border="0" align="left" cellpadding="4" cellspacing="0">
<tr height="1">
<td bgcolor="#727272" colspan="3"></td>
</tr>
<tr bgcolor="#FFFFFF" height="15">
<td><strong><font face="tahoma"><font size=4><font color=0C3C60>Helping Your Team Get the Big Vision While Leaving Room for Theirs</font color=0C3C60></font size=6></font face="tahoma"></strong></td>
<td></td>
<td bgcolor="#FFFFFF" align="right"><input id="lnk3" type="button" value="[+] Expand" onclick="toggle_visibility('tbl3','lnk3');"></td>
</tr>
<tr>
<td colspan="3">
<table width="800px" border="0" cellpadding="4" cellspacing="0" id="tbl3">
<tr>
<td colspan="3">
<ul>
<li><font face="arial"><font size=3>The Coaching Analogy
<li>The Bunker Story
<li>Finding Mutual Goals
<li>Letting the Team Be Involved in the Vision Decision
<li>Vertical Integration of Strategy (A Case Study)
<li>Helping People Buy-In
<li>When is Buy-In Really Achieved
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="800px" border="0" align="left" cellpadding="4" cellspacing="0">
<tr height="1">
<td bgcolor="#727272" colspan="3"></td>
</tr>
<tr bgcolor="#FFFFFF" height="15">
<td><strong><font face="tahoma"><font size=4><font color=0C3C60>Developing Highly Capable Teams</font color=0C3C60></font size=6></font face="tahoma"></strong></td>
<td></td>
<td bgcolor="#FFFFFF" align="right"><input id="lnk4" type="button" value="[+] Expand" onclick="toggle_visibility('tbl4','lnk4');"></td>
</tr>
<tr>
<td colspan="3">
<table width="800px" border="0" cellpadding="4" cellspacing="0" id="tbl4">
<tr>
<td colspan="3">
<ul>
<li><font face="arial"><font size=3>Evolution of the Knowledge Worker
<li>Self-Healing Concepts
<li>Decentralization
<li>Self-Organizing
<li>Auto-Reconfiguring
<li>Impossibility of Control
<li>Management as a Liberal Art
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="800px" border="0" align="left" cellpadding="4" cellspacing="0">
<tr height="1">
<td bgcolor="#727272" colspan="3"></td>
</tr>
<tr bgcolor="#FFFFFF" height="15">
<td><strong><font face="tahoma"><font size=4><font color=0C3C60>Incentives and Motivations - What Works</font color=0C3C60></font size=6></font face="tahoma"></strong></td>
<td></td>
<td bgcolor="#FFFFFF" align="right"><input id="lnk5" type="button" value="[+] Expand" onclick="toggle_visibility('tbl5','lnk5');"></td>
</tr>
<tr>
<td colspan="3">
<table width="800px" border="0" cellpadding="4" cellspacing="0" id="tbl5">
<tr>
<td colspan="3">
<ul>
<li><font face="arial"><font size=3>Theory of Motivation
<li>Theory of Incentives
<li>Direct Monetary Reward
<li>Indirect Non-Monetary Reward
<li>The Diving Catch
<li>Go Big or Go Home
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="800px" border="0" align="left" cellpadding="4" cellspacing="0">
<tr height="1">
<td bgcolor="#727272" colspan="3"></td>
</tr>
<tr bgcolor="#FFFFFF" height="15">
<td><strong><font face="tahoma"><font size=4><font color=0C3C60>Remaking HR - What Managers Need to Know</font color=0C3C60></font size=6></font face="tahoma"></strong></td>
<td></td>
<td bgcolor="#FFFFFF" align="right"><input id="lnk6" type="button" value="[+] Expand" onclick="toggle_visibility('tbl6','lnk6');"></td>
</tr>
<tr>
<td colspan="3">
<table width="800px" border="0" cellpadding="4" cellspacing="0" id="tbl6">
<tr>
<td colspan="3">
<ul>
<li><font face="arial"><font size=3>The Risk of Litigation
<li>At Will Employment
<li>Hiring Process (Do's and Dont's)
<li>Firing Process (Do's and Dont's)
<li>Formal Corrective Plans
<li>Coaching and Performance Reviews
<li>Compensation Issues
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>