Forums

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

Home Forums CSS [Solved] Consistent buttons in a table

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #191651
    jkurrle
    Participant

    I have a table of 12 buttons (4 wide by 3 down) and each button stretches to the same width consistently. I have adjusted my table to all row heights are the same, basically to the height of the highest button (as it has the most text).

    My last need is to force the buttons to all be an equal height, to match the equal width. Right now, all buttons are the same height as the tallest button in its row, but some button rows are buttons with one line of text, others, 2 or 3 lines. How do I make these buttons all of an equal height?

    My CSS for my table cells:
    .insidebuttontd{
    width: 25%;
    height: 33%;
    }

    My CSS for my buttons:
    .itsd-insidebutton{
    width: 100%;
    height: 110%;
    background-color: #1b8ad4;
    color: white;
    }

    Any ideas would be greatly appreciated.

    #191652
    Paulie_D
    Member

    Perhaps you could demo it in Codepen for us?

    #191661
    jkurrle
    Participant

    Here it is: http://codepen.io/anon/pen/ZYprqY

    As you can see, the buttons are consistent in height in each row, but not consistent in height across all rows.

    #191662
    GSutherland
    Participant

    I believe you’re either going to need to specify a static height for all the buttons or use some javascript. Can’t think of any pure CSS solutions for dynamic height in this case.

    Fork with two possible js solutions if that’s the route you go:

    http://codepen.io/GSutherland/full/ogzEQw/

    #191669
    jkurrle
    Participant

    The first one worked perfectly. Thank you very much!

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