Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS not being applied inside of Table.

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #40247
    zemaker
    Participant

    I am trying to have CSS applied within a table…when you check the checkbox it crosses out the name, but its not working, see here:

    html

    Incomplete

    CSS



    input[type="checkbox"]:checked + label {
    text-decoration:
    line-through;
    color: rgba(0,0,0,.3);
    }

    However it does work if I take it out of a table.

    #111645
    Paulie_D
    Member

    My guess is that it’s the table that’s causing the issue. Try taking it out.

    http://codepen.io/anon/pen/LzgDt

    Generally, current thinking is that there would be no need for a table for layout purposes.

    #111646
    zemaker
    Participant

    Sadly that is not an option, this is a table that contains multiple columns and has pagination. Taking it out of a table is not an option.

    ideally this this what it would be:
    http://codepen.io/anon/full/LzgDt

    #111647
    Kitty Giraudel
    Participant

    The problem isn’t directly the table. To use the + sibling selector, the elements need to share the same parent.

    But in your example, the label and the input are not in the same container. Make them siblings and everything will work like a charm. ;)

    #111649
    Paulie_D
    Member

    Aha! :)

    #111652
    zemaker
    Participant

    I want to use this example http://codepen.io/ImBobby/full/EdALB but inside a table…you know be fancy and all :)

    #111653
    Kitty Giraudel
    Participant

    Again, both the label and the input have to be in the same parent in order to make the siblings selectors (+ and ~) work. From there, you can do whatever you want with your table layout.

    #111654
    Paulie_D
    Member

    I could say, and I will…why is he use a table your quoted example does not.

    Why not look at the full breakdown of your linked example: http://codepen.io/ImBobby/pen/EdALB

    Much prettier and better structured too. We (and by ‘we’ I mean us modern new-fangled people) only use tables where there is, you know, tabular data involved.

    Hugo has it right.

    #111660
    zemaker
    Participant

    Sadly this will be tabular data, student attendance and what have you….

    #111661
    Paulie_D
    Member

    I don’t see that this is REALLY tablular data but so be it. It seems that that’s the way you want to go.

    I can only suggest that you provide us with a link to a live site for us to fully examine.

    #111691
    zemaker
    Participant

    Sadly I can’t provide you w/ the working code but here is a screen capture: http://i.imgur.com/t8BMb.png

    #111692
    Senff
    Participant

    Yup, both the checkbox and the label have to be in the same TD: http://codepen.io/senff/pen/BLrjq

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.