我不知道为什么要用表来列出俱乐部。你可以简单地有一个无序的俱乐部列表和一个所有细节的嵌套列表。

<ul id="myTreeView">
    <li>
        <span>Clubs</span>
            <ul>
                <li>
                    <span class="expandable">CO Harrach</span>
                        <ul class="non-expandable">
                            <li>Address: Asia</li>
                            <li>Open: 24x7</li>
                        </ul>
                </li>
            </ul>
            <ul>
                <li>
                    <span class="expandable">Zamalek</span>
                        <ul class="non-expandable">
                            <li>Address: Australia</li>
                            <li>Open: 5 days</li>
                        </ul>
                </li>
            </ul>
  </li>
</ul>

<style>
 #myTreeView {
  list-style-type: none;
}

# myTreeView ul {

list-style-type:none;
}

# myTreeView {

  margin: 0;
  padding: 0;
}
.expandable {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}
.expandable::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}
.expanded::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */'
  transform: rotate(90deg);  
}
.non-expandable {
  display: none;
}
.active {
  display: block;
}
</style>

<script>
var toggler = document.getElementsByClassName("expandable");
var i;
for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".non-expandable").classList.toggle("active");
    this.classList.toggle("expanded");
  });
}
</script>

我刚刚创建了一个示例树视图here。
此外，您可以阅读我的完整文章here。