Forums

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

Home Forums Design Applying border radius settings to individual tables and/or cells

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #259199
    DRandall
    Participant

    Hello,

    I am trying to add a border radius element to specific tables on my website (round out the corners) but am not sure how. All examples I can find online show you how to add the border radius to the main TABLE .TR .TD section, but I don’t want the settings to apply to EVERY table on my page. I want to be able to call a class of some sort, so I can apply individual border radius settings (per quadrant) on a one-by-one table basis.

    Thank you in advance for your help.

    #259202
    Paulie_D
    Moderator

    I want to be able to call a class of some sort, so I can apply individual border radius settings (per quadrant) on a one-by-one table basis.

    So what have you tried?

    This would probably required 5 classes or more…or you could try something like this

    https://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i

    #259204
    DRandall
    Participant

    I’m not trying to collapse a table, I’m just new to CSS and don’t know the syntax for adding a class to an individual table (or cell) itself.

    #259205
    Paulie_D
    Moderator

    The same way you add a class to anything…in the HTML


    <table class="myclass"> etc
    #259206
    DRandall
    Participant

    Here is something recent I have tried:

    table.comment td {
    border-bottom-left-radius: 8px;
    }

    and then in one of my table cells, assigning the class like this:

    But this does not result in the table cell inheriting any kind of style.

    I have tried giving the style to the table itself (not the td) and this does work, but it gives every in the table the style and this is not what I want. I want to be able to give specific table cells the style. Thanks.

    #259207
    DRandall
    Participant

    Sorry, the missing code should be:

    #259208
    DRandall
    Participant

    Hm, don’t know why the sample html isn’t showing up, but it’s just td class = “comment”

    #259209
    JeroenR
    Participant

    Your CSS selector is table.comment td, so that expects a class ‘comment’ on your table element.
    What you describe is a class ‘comment’ on the table-cell, therefore your selector should be table td.comment.

    #259210
    Paulie_D
    Moderator
    #259211
    DRandall
    Participant

    Awesome, thank you. :)

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