表格正文将自身限制为1列的宽度

Question

我目前正在处理从数据库生成表格的脚本（以显示选举结果）。
我希望折叠某些部分（用于原色）（并且仅在单击相应的按钮时打开）。

以下是我正在使用的javascript代码的一部分：

// Previous candidates in the loop
row +=
  '<tr><td colspan="3" style="text-align:center;" onclick="toggler(this.parentNode.parentNode.nextSibling);">';
row += PartyName(candidate.getAttribute("party")) + " primaries ▼"; // The display button
row += "</td></tr>";
row += '<tbody class="collapsible" style="display:block;">';
// Code running through the primaries candidates to display them
row += "</tbody>";
// Next candidates in the loop

切换功能：

function toggler(item) {
  if (item.style.display == "none") {
    item.style.display = "block";
  } else {
    item.style.display = "none";
  }
}

这是表格的当前外观： 左侧的图像不是问题（我只需要将其添加到文件中）。正如您所看到的，问题在于，躯干仅适合1列的宽度。我该如何解决？

Answer 1

我想为表元素定义display: block将使典型的表属性过时，因此我猜您应该使用height: 0与height: auto而不是display: block/none，还应添加overflow-y: hidden可以在高度为零时切断显示。