CSS IDs and nesting tags with Haml

Question

I have the following code in my CSS file, which isn't working.

#home table th td {
  border:1px solid black;
  padding:2px;
}

In my index.haml file, I have:

%div{:id => "home"}
  %table
    %tr
      %th
        Your Account
    %tr
      %td
        #{link_to 'View my profile', @profile}
        %br
        #{link_to 'Edit my profile', edit_profile_path(@profile)}
        %br
        #{link_to 'Logout', :controller => 'admin', :action => 'logout'}

That creates this page source (I know, redundant. But just to be thorough):

<div id='home'>
  <table>
    <tr>
      <th>
        Your Account
      </th>
    </tr>
    <tr>
      <td>
        <a href="/profiles/7">View my profile</a>
        <br />
        <a href="/profiles/7/edit">Edit my profile</a>
        <br />
        <a href="/admin/logout">Logout</a>
      </td>
    </tr>
  </table>
</div>

But the borders don't show up when I view the file in-browser...

When I separate table tags out to be

#home table {
      border:1px solid black;
      padding:2px;
    }

#home th {
      border:1px solid black;
      padding:2px;
    }

#home td {
      border:1px solid black;
      padding:2px;
    }

It looks fine.

What's wrong with the previous CSS code versus this version? How should I properly collapse those tags into a single ID?

Answer 1

Following is problem you can use

For header :

#home table tr th {
  border:1px solid black;
  padding:2px;
}

For table cell :

#home table tr td {
  border:1px solid black;
  padding:2px;
}

Fore more details check : http://www.w3schools.com/css/default.asp