Forums

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

Home Forums CSS Span Header(s) across all columns

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #34610
    k_mcminn
    Member

    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/

    #88290
    Bob
    Member

    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.

    #88299
    k_mcminn
    Member

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

    #88308
    Mottie
    Member

    Why not apply the rounded corners to the entire table?

    #88406
    k_mcminn
    Member

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

    #88408
    thomas
    Member

    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/

    #88416
    Mottie
    Member

    @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)
  • The forum ‘CSS’ is closed to new topics and replies.