Hide part of a table.. 1

[iranor]

I can't seems to find a way to hide only a part of a table. Look to the code below:

<table>
  <tr>
    <td>col1</td>
    <td>col2</td>
  </tr>
  <div id="bla" style="display: none">
    <tr>
      <td>col1content</td>
      <td>col2content</td>
    </tr>
  </div>
</table>

I'm used with html, but it's the first time I try to use that, so I don't know if it's possible. I only wants to hide a part of the table, then when a checkbox is checked I display other rows on the table with display: block.

 

[feherke]

Hi

<table>
  <tr>
    <td>col1</td>
    <td>col2</td>
  </tr>
  <[red]tbody[/red] id="bla" style="display: none">
    <tr>
      <td>col1content</td>
      <td>col2content</td>
    </tr>
  </[red]tbody[/red]>
</table>

Feherke.

http://rootshell.be/~feherke/

 

[iranor]

Thanks, it is some sort of working, but it doesn't perfectly. First, the part of the table between the tbody tag appears below the closing </table>. Second, when I use style display block/none, it adds an empty line below the table each time.

 

[monksnake]

Give all the rows or row <tr> that you want to hide a class name. Then on a click of the checkbox, remove the classname from the <tr>.

HTML

<tr class="hiddenRow">
 <td>dlf;kjs;</td>
 <td>dlf;kjs;</td>
 <td>dlf;kjs;</td>
 <td>dlf;kjs;</td>
</tr>

CSS

tr.hiddenRow {
   display:none;
}

You will need some javascript to show the rows since you want to show then on a checkbox click. If you need help with that, head over to the javascript forum and we'll answer you there.

<.

 

[iranor]

That will do, thanks!

It's okay, i'll be able to do the javascript part. I didn't thought of using the tr attributes to do it ^^

 

[monksnake]

Glad I could be of help

<.

 

[Vragabond]

I expect that you know that Geckos (and I would expect a lot of other modern, standards-compliant browsers) render <tr> as display: table-row; and not as display: block; In the meanwhile IE6 (not sure about the 7) does not understand table-row as a display property at all. Just be prepared for some strange problems with browsers...

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]