How to hide a table column in mvc3 and show on hover?

Question

I have to hide a a column from my table and show it again on hover. This is how table looks:

       ProjectName|Description|Status

I have to hide description table and show it in a pop up when i take the mouse on ProjectName. The description column should be in hide mode at start.

This is how my Index.cshtml page looks

             @{
           ViewBag.Title = "Index";
             }

        <h2>Index</h2>

        <p>
      @Html.ActionLink("Create New", "Create")
        </p>
      <table>
          <tr>
               <th>
               projectName
         </th>
        <th>
             Description
       </th>
        <th>
            status
         </th>
       <th></th>
  </tr>

    @foreach (var item in Model) {
       <tr>
         <td>
          @Html.DisplayFor(modelItem => item.projectName)
         </td>
         <td >
          @Html.DisplayFor(modelItem => item.Description)
        </td>
         <td>
          @Html.DisplayFor(modelItem => item.status)
       </td>
       <td>
        @Html.ActionLink("Edit", "Edit", new { id=item.ProjectId }) |
        @Html.ActionLink("Details", "Details", new { id=item.ProjectId }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.ProjectId })
        </td>
      </tr>
      }

 </table>

Answer 1

Hide a column using jquery

$('td:nth-child(IndexNumber)').hide();

Please, check this other question in StackOverflow

Hide/Show Column in an HTML Table