表 tbody 将自身限制为 1 列的宽度

Question

I'm currently working on a script generating a table from a database (to display elections results).
I want some parts (for the primaries) to be collapsed (and only opened when clicking on a corresponding button).

Here is a part of the javascript code I'm using:

// 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

The toggler function:

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

Here is what the table currently looks like: The images on the left are not a problem (I just need to add them to the file). The problem, as you see, is that the tbody only fits in the width of 1 column. How do I fix this?

Answer 1

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