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
  • #191651

    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:
    width: 25%;
    height: 33%;

    My CSS for my buttons:
    width: 100%;
    height: 110%;
    background-color: #1b8ad4;
    color: white;

    Any ideas would be greatly appreciated.


    Perhaps you could demo it in Codepen for us?


    Here it is:

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


    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:


    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.