Combining Rails and jQuery, CSS?

Question

I'm trying to learn how to combine jQuery and Rails. I have a table I've created with the accompanying CSS. I'd like to have the first under every to NOT have this border. I thought if I was able to select index[0] of the loop and apply the CSS with jQuery it would work but I wasn't sure how to go about this. Would I disable the css for .details-row or would I add on another class that had a border-top: transparent?

Any explanations or resources would be great, thank you.

• HTML

  <table>
    <% details.each do |details| %>
      <tr class='details-row'>
        <td class='detail-title col-md-6 js-text-productSpec'><%= specification.name %></td>
        <td class='detail-description col-md-6'><%= specification.description %> </td>
      </tr>
    <% end %>
  </table>
  

• CSS

  .details-row {
    border-top: solid 1px #dedede;
    td { 
      padding: 5px 0 5px 0;
    }
  }
  

I'd like the table to look like this:

Answer 1

Try the following:

table {
  border-collapse: collapse; /* to allow to put border in tr*/
  .details-row {
    border-top: solid 1px #dedede;
    td { 
      padding: 5px 0 5px 0;
    }
    &:first-child { border-top: none; }
  }
}

pure css version:

table { border-collapse: collapse; }
table .details-row { border-top: 1px solid #dedede; }
table .details-row:first-child {border-top: none; }
table .details-row td { padding: 5px 0 5px 0; }

Also try removing col-md-6 from td class since I think it is from bootstrap and is used for something different

This is a test in fiddle: http://jsfiddle.net/7hj5jpk7/

Answer 2

if you're using jQuery, you can use $('tr:odd') which selects every other <tr>'s. So if you want .details-row to only apply to the [0] if would have to be the :even selector. $('tr:even') to select it

Resources:

http://api.jquery.com/odd-selector/

http://api.jquery.com/even-selector/