1

Basically I want to be able to remove margins below and above the 'non' first and last child duplicates. So I have tried to target the row that has duplicate id's.. in this case #Day2 and #Day6, then I've tried to select the :first-child and the :last-child

tr#Day2:first-child td, tr#Day6:first-child td { margin-top: 0px !important; }
tr#Day2:last-child td, tr#Day6:last-child td { margin-bottom: 0px !important; }

I'm not sure if a css only way is able to achieve what I want or if I'm on a somewhat right path with what I'm currently doing.

My attempt to use jquery to do this is:

<script>
    $(document).ready(function () {
        $(document).ajaxComplete(function () {
            var seen = {};
            $('table tr td').each(function() {
                var txt = $(this).text();
                if (seen[txt])
                    $(this).css("margin-bottom", "0px");
                else
                   seen[txt] = true;
            });
        });
   });
</script>

Though this doesn't seem to even remove the margin of a duplicate, nor does my css attempt I'm sure there is a way. Perhaps I cannot use :first-child and :last-child with a tr id? If so is there any other way to achieve what I want?

I greatly appreciate any help, thank you.

JSFiddle Please view my example here.

**

Solution

** All achieved without the need for jQuery. Please find the working edition here. Thanks @Marcin for pointing me towards the solution.

JSFiddle: View Solution

aussiedan
  • 341
  • 1
  • 10

1 Answers1

1

There is only workaround for this:

.Day2 { margin: 0px 0px 5px 0px; }
.Day2 ~ .Day2 td { margin-top: 5px; }

This sets only bottom margin on each .Day2 and then, if there is any .Day2 before, sets margin-top to 5px;

Taken from CSS3 selector :first-of-type with class name?

You shouldn't use the same id on more than one element. Use class instead (for example class="day1").

Marcin Szwarc
  • 569
  • 3
  • 13
  • Thanks for the reply @Marcin however I have to use the same CSS for all days, as you see here if I add to `.Day5` and `.Day3` it messes it up: [JSFiddle](https://jsfiddle.net/Ljjv97fz/6/) In this case the `.Day2 ~ .Day2` isn't working? – aussiedan Sep 16 '17 at 13:41
  • I think `.Day2 ~ .Day2 td` is what you need. – Marcin Szwarc Sep 16 '17 at 13:55
  • Thanks @Marcin you got me on the right track. I just had to add `.Day2 td { margin: 10px 0px 0px 0px }` to the first one also. – aussiedan Sep 16 '17 at 14:36