'How can I use div with sub tables to hide data

My starting point is the first image, from the users perspective there are three tables, but it is implemented as a single html table: Original, table columns aligned

It looks fine, but I want to add a Javascript function that toggles to only show the first table (MusicBrainz where potential releases are found) and hide the other two. My plan was to code it so that there are actually three tables within an outer table, then set an id attribute on each table and write function thats find element with said id and set display:none/table row

So I went ahead with html chnages and now have this:

Modification, table columns not aligned

the trouble is because they are now three separate html tables the columns widths for each table are not aligned with each other because each consider their own data to work out the best way to use the available screenwidth, and now it looks messy.

So it seems i have two alternatives approaches but dont have a solution to either

  1. Keep the tables within tables approach, and somehow align the table columns to each other.

  2. Revert to the original design and use a different method to hide a particular row, I was considering using <divs) but as I understand it you can't have a <div> directly after a table element, i.e this is invalid

    ` ... ... 

       <div id="2">
     <!-- Table 1-->
     <tr><td>...</td></tr></div>
     <tr><td>...</td></tr></div>
   </div>

   <div id="3">
     <!-- Table 1-->
     <tr><td>...</td></tr></div>
     <tr><td>...</td></tr></div>
   </div>
</table>

    `

Update based on Ulrichs answer

Html

<input type="submit" onclick="return togglePotentialMatchesLinks()">


<!--Soft Linked:Start-->
<tbody class="releasegroupingpotential" >
<tr>
<th class="releasetableheading_action" colspan="18" >MusicBrainz Releases where potential links to Discogs have been found</th>
</tr>
<tr>
<th class="releasetableheading_action" >Actions</th>
<th class="releasetableheading_year" >Year</th>
<th class="releasetableheading_title" >Title</th>

Css

.releasegroupingpotential {
    width:100%;
}

Javascript

function togglePotentialMatchesLinks()
{
    var els = document.getElementsByClassName("releasegroupingpotential");
    var e;
    alert("No of Elements found is:"+els.length);
    for(e in els)
    {
        e.style.display = e.style.display=="none"
                ?"table-row-group"
                :"none";
    }
    return true;
}

When I click on the button the alert in the Javascript displays:

No of Elements found is:1

So it is being called but the tbody does not disappear :(

javascripthtml


Solution 1:[1]

My thought would be to have three <tbody></tbody>s in your table and give them ids and target them, as it seems you want to target a group of rows anyway.

Vague example:

<!DOCTYPE html>
<html>
  <body>
    <table>
      <tbody >
	<tr><td>row 1</td></tr>
      </tbody>
      <tbody id="hideme">
	<tr><td>row 2</td></tr>
      </tbody>
      <tbody>
	<tr><td>row 3</td></tr>
      </tbody>
      </table>
    <a href="#" onclick="document.getElementById('hideme').style.display='none'">hide middle</a>
  </body>
</html>

Solution 2:[2]

If I understand the question, you may add width to td or th so your colunms will be of equal width. You may do it in html or in css. E.g.

<table style="width:100%;">
<tr><td style="width:5em;">1</td><td>2</td></tr>
...
<tr><td>1</td><td>2</td></tr>
</table>
<table style="width:100%;">
<tr><td style="width:5em;">a</td><td>b</td></tr>
...
<tr><td>a</td><td>b</td></tr>
</table>

Solution 3:[3]

<!DOCTYPE html>
<html>
  <body>
    <table>
      <tbody >
    <tr><td>row 1</td></tr>
      </tbody>
      <tbody id="hideme">
    <tr><td>row 2</td></tr>
      </tbody>
      <tbody>
    <tr><td>row 3</td></tr>
      </tbody>
      </table>
    <a href="#" onclick="document.getElementById('hideme').style.display='none'">hide middle</a>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Sergiy T.
Solution 3 Mohammedfares Hussein

Related Questions