Grow your CSS skills. Land your dream job.

CSS not being applied inside of Table.

  • # October 11, 2012 at 10:23 am

    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.

    # October 11, 2012 at 10:30 am

    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.

    # October 11, 2012 at 10:33 am

    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

    # October 11, 2012 at 10:33 am

    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. ;)

    # October 11, 2012 at 10:43 am

    Aha! :)

    # October 11, 2012 at 11:02 am

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

    # October 11, 2012 at 11:06 am

    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.

    # October 11, 2012 at 11:06 am

    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.

    # October 11, 2012 at 11:41 am

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

    # October 11, 2012 at 11:49 am

    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.

    # October 11, 2012 at 2:25 pm

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

    # October 11, 2012 at 2:33 pm

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".