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:

enter image description here

Can you explain " I'd like to have the first under every to NOT have this border"? — Seth T
– Seth T, Commented Apr 30, 2015 at 2:58

Aguardientico · Accepted Answer · 2015-04-30 03:43:53Z

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/

edited Apr 30, 2015 at 3:43

answered Apr 30, 2015 at 3:05

Aguardientico

7,7991 gold badge36 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kumo Over a year ago

I tried this as well as first child or adjacent css selectors, but it didnt work...I heard that I had to use some rails to override it?

Aguardientico Over a year ago

Can you share an screenshot or image or mockup about what you want and want you have?

Kumo Over a year ago

Thanks for that, I totally understand what you've done and tried it myself, but maybe it's because I'm doing it in rails syntax and not just pure HTML that it's not identifying the css that way? I'm not sure, but I have definitely tried it this way and it's still not working. =(

Aguardientico Over a year ago

you rails code is fine (I mean the iterator), you can view the source code in the browser and should be pretty similar to the example in pure html. Maybe it is related to: a. sass or b. bootstrap. I've added a pure css version instead of sass to verify if that is the issue

pauloancheta · Accepted Answer · 2015-04-30 03:06:25Z

0

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/

answered Apr 30, 2015 at 3:06

pauloancheta

3692 silver badges9 bronze badges

Collectives™ on Stack Overflow

Combining Rails and jQuery, CSS?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related