hide <th> and <td> tag

Question

<table class="display" id="jquerytable">
  <thead>
    <tr>
      <th>Name</th>
      <th>BillingAddress</th>
      <th>DeliveryAddress</th>
      <th>Eng 1</th>
      <th>Eng 2</th>
    </tr>
  </thead>
  <tbody>
    <% foreach (var item in Model) { %>
    <tr>
      <td><%= Html.Encode(item.Name) %></td>
      <td><%= Html.Encode(item.BillingAddress) %></td>
      <td><%= Html.Encode(item.DeliveryAddress) %></td>
      <td><%= Html.Encode(item.Engineer1Id) %></td>
      <td><%= Html.Encode(item.Engineer2Id) %></td>
    </tr>
    <% } %>
  </tbody>
</table>

How can I hide th Eng 1 and Eng 2? I try wit visible = "false" but not successful.

Answer 1

You want to use

<th style="display: none;">

Alternatively a class:

.hide { display: none; }

<th class="hide">

You'll want to make sure this class or style is on both the <th> and the corresponding <td>

If you want to toggle visibility with jQuery you can apply a class to both the <th> and the <td> (e.g. "engcol") and then use .toggle() like so:

$('.engcol').toggle();

Answer 2

Graphain is mostly right; you really want to use:

<th style="visibility: hidden;">

The difference between display: none; and visibility: hidden; is that none takes the element out of the document flow and visibility just hides it. So by using hidden, the possibility that you get weird layout effects is reduced.