Bokambo
Bokambo

Reputation: 4480

hide <tr> with style display:none does not work

I want to hide <tr> , when i do below for <td> it works but for <tr> it does not, how i can hide <tr>?

<td style="display:none">Eve</td> -- works

<tr style='display:none'>
                    <%# DataBinder.Eval(Container.DataItem, "HighlightedTextSearch")%>
                         </tr> -- does not work

Upvotes: 1

Views: 3000

Answers (2)

Daniel Beck
Daniel Beck

Reputation: 21475

display:none works fine on a table row:

<table>
  <tr style="display:none">
    <td>This will not be visible</td>
  </tr>
</table>

Your problem is that you're not wrapping the content in a <td> so it's getting bumped outside the table altogether, and therefore is not being controlled by the tr's styling:

table {border: 1px solid}
<table>
<tr style="display:none">
This is invalid HTML, because it's not inside a table cell.
Note that this sentence is displayed *before* the table rather than inside it.
</tr>
</table>

Upvotes: 2

MichaelvE
MichaelvE

Reputation: 2578

The display none on the tr does work. See the row 2 in the demo below:

<table>
  <tr>
    <td style="display:none">row 1</td>
    <td>row 1</td>
  </tr>

  <tr style='display:none'>
    <td>row 2</td>
    <td>row 2</td>
  </tr>

  <tr>
    <td>row 3</td>
    <td>row 3</td>
  </tr>

</table>

Upvotes: 1

Related Questions