Grow your CSS skills. Land your dream job.

Span Header(s) across all columns

  • # October 2, 2011 at 9:46 pm

    I am simply stuck and there has to be an easy way to get this done. I’ve got an HTML table that has 3 columns. Well, as you can see in the image, I’m trying to style the headers with the border-radius property. What I want is for that header to span across all three columns but only have the top-left and top-right corners use the border-radius property. The parts I circled in green I would like to have no border radius there, just flat.

    Am I going about this the wrong way or is there an easier way to do this?

    http://imageshack.us/f/3/31933194.png/

    Bob
    # October 3, 2011 at 8:24 am

    Maybe you can assign a id or a class to the topleft and topright table cells and then use the border-top-left-radius and the border-top-right-radius properties to only the topleft and right corners are rounded.

    # October 3, 2011 at 9:20 am

    Bob! Thanks for the idea. It makes sense but I have no idea how I’d implement that. Could you give me an example?

    # October 3, 2011 at 11:59 am

    Why not apply the rounded corners to the entire table?

    # October 3, 2011 at 6:26 pm

    Apparently, I don’t know what I want. If I wanted to apply rounded corners to the entire table, I would have done so.

    # October 3, 2011 at 8:48 pm

    You can either use classes on the top/left and top/right cells as @Bob mentioned, or target them using :first-child and :last-child pseudo-selectors, as in this example:

    http://jsfiddle.net/pLgmL/

    # October 3, 2011 at 9:36 pm

    @k_mcminn: I wasn’t being sarcastic… here is what I mean, with just modifying thomas’ demo

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

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