HTML -Output Alignment

<style type='text/css'> .nxn-ret-table{width:100%;
border-collapse:collapse; font-family: Arial;} .nxn-ret-table th{ background:
C4B899;} /*  Define the background color for all the ODD background rows  */
.nxn-ret-table tr:nth-child(odd){ background: #DAE0E1;} /*  Define the
background color for all the EVEN background rows  */ .nxn-ret-table
tr:nth-child(even){background: #f7f7f7 } pre { font-family: Arial;overflow:
auto;background-color:powderblue;} </style>
<div class="container">
      <table class="table table-bordered">
        <tr class="header" class="accordion-toggle"  data-toggle="collapse"
data-target="#collapseOne">
          <td colspan="2">System Resource Utilization</td>
        </tr>
        <tr id="collapseOne" class="collapse in">
            <td colspan="2" style="padding:0;">
                <table class="table table-condensed nxn-mar-bot-0">
                    <tr>
                        <td>CPU</td>
                        <td bgcolor="#aad977"> <a name="C3" id="C3parent" onclick="myFunction(this.id)" href="#C3" target="_self" >Green </a></td>
<div id="C3" style="display: none"> <pre>Average:        all      0.04
0.00      0.08      0.02      0.00     99.85</pre>
<br></div>
                    </tr>
                    <tr>
                      <td>Memory</td>
                        <td><td bgcolor="#aad977">Green</td></td>
                    </tr>
                    <tr>
                      <td>Swap</td>
                        <td><td bgcolor="#aad977">Green</td></td>
                    </tr>
                    <tr>
                         <td>Defunct Process</td>
                         <td><td bgcolor="#aad977">Green</td></td>
                    </tr>
                    <tr>

                      <td>System Load Average</td>
                        <td><td bgcolor="#aad977">Green</td></td>

                    </tr>
                </table>
            </td>
        </tr>
        <tr class="header" class="accordion-toggle"  data-toggle="collapse" data-target="#collapseTwo">
          <td colspan="2">Header 2</td>
        </tr>
        <tr id="collapseTwo" class="collapse in">
            <td colspan="2" style="padding:0;">
                <table class="table table-condensed nxn-mar-bot-0">
                    <tr>
                      <td>data</td>
                      <td>data</td>
                    </tr>
                    <tr>
                      <td>data</td>
                      <td>data</td>
                    </tr>
                </table>
            </td>
        </tr>
      </table>
    </div>
        <script>
function myFunction(id) {
                var y = document.getElementById(id).name;
    var x = document.getElementById(y);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }

}
</script>

Open in new window




When i run the above HTML ..i get the output
Screenhsot attached (Output-1)

when i click the hyperlink Green corresponds to CPU.it gives the output screenshot attached --Output-2

but i want the out put below the Hyperlink Green as attached in screenshot Output-3
Output-1.PNG
Output-2.PNG
Output--3.jpg
Suresh KumarAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
There are many things wrong with your code
1
<td bgcolor="#aad977"> <a name="C3" id="C3parent" onclick="myFunction(this.id)" href="#C3" target="_self" >Green </a></td>
<div id="C3" style="display: none"> <pre>Average:        all      0.04
0.00      0.08      0.02      0.00     99.85</pre>
<br></div>

Open in new window

The <div> is outside of the <td></td> - this is going to result in it being rendered outside of the table

2. You are using deprecated attributes bgcolor

3. Rather style containers INSIDE the <td></td> rather than the <td> elements themselves

4. You have double <td><td> .... </td></td> tags - don't do that - it creates invalid markup

5. I have changed your <td bgcolor...> to <td><span style="background-color: ..."> - this will get you what you want but I would advise moving the style to your CSS.

Here is some code that does what you need.
<style type='text/css'> .nxn-ret-table{width:100%;
border-collapse:collapse; font-family: Arial;} .nxn-ret-table th{ background:
C4B899;} /*  Define the background color for all the ODD background rows  */
.nxn-ret-table tr:nth-child(odd){ background: #DAE0E1;} /*  Define the
background color for all the EVEN background rows  */ .nxn-ret-table
tr:nth-child(even){background: #f7f7f7 } pre { font-family: Arial;overflow:
auto;background-color:powderblue;} </style>
<div class="container">
      <table class="table table-bordered">
        <tr class="header" class="accordion-toggle"  data-toggle="collapse"
data-target="#collapseOne">
          <td colspan="2">System Resource Utilization</td>
        </tr>
        <tr id="collapseOne" class="collapse in">
            <td colspan="2" style="padding:0;">
                <table class="table table-condensed nxn-mar-bot-0">
                    <tr>
                        <td style="vertical-align: top">CPU</td>
                        <td><a style="background-color: #aad977" name="C3" id="C3parent" onclick="myFunction(this.id)" href="#C3" target="_self" >Green </a></div>
<div id="C3" style="display: none"> <pre>Average:        all      0.04
0.00      0.08      0.02      0.00     99.85</pre>
<br></div></td>
                    </tr>
                    <tr>
                      <td>Memory</td>
                        <td><span	 style="background-color: #aad977">Green</span></td>
                    </tr>
                    <tr>
                      <td>Swap</td>
                        <td><span style="background-color: #aad977">Green</span></td>
                    </tr>
                    <tr>
                         <td>Defunct Process</td>
                         <td><span style="background-color: #aad977">Green</span></td>
                    </tr>
                    <tr>

                      <td>System Load Average</td>
                        <td><span style="background-color: #aad977">Green</span></td>

                    </tr>
                </table>
            </td>
        </tr>
        <tr class="header" class="accordion-toggle"  data-toggle="collapse" data-target="#collapseTwo">
          <td colspan="2">Header 2</td>
        </tr>
        <tr id="collapseTwo" class="collapse in">
            <td colspan="2" style="padding:0;">
                <table class="table table-condensed nxn-mar-bot-0">
                    <tr>
                      <td>data</td>
                      <td>data</td>
                    </tr>
                    <tr>
                      <td>data</td>
                      <td>data</td>
                    </tr>
                </table>
            </td>
        </tr>
      </table>
    </div>
        <script>
function myFunction(id) {
                var y = document.getElementById(id).name;
    var x = document.getElementById(y);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }

}
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.