• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Menu
  • Back to Top
  • Services
    • Web Design
    • Graphic Design
    • Web Hosting
  • Portfolio
  • Pricing
    • FAQ’s
  • About Me
    • Blog
    • Contact

Responsive Table Cells with Equal Height and Width – CSS Only

August 23, 2017Dan Brubaker2 Comments

A coding challenge that I faced today consisted of responsive table cells that needed to maintain equal height and width dimensions at every screen size. I wanted table cell that looked like perfect squares for building an online calendar. I didn’t want to use any Javascript to dictate the cell height, so after a few hours I came up with a CSS-only approach that works pretty well! The best thing about my solution…it’s basically just one line of code!

Disclaimer: It works “pretty” well… I wanted to form perfect squares, but the solution is not technically “pixel-perfect” at all screen sizes. But don’t let that scare you away…read on! I think you’ll like the outcome.

You need to start with an HTML table that looks something like this:

https://gist.github.com/danbru1989/03abdb678b48e1bdacfd0053b5e91e35

Then you’ll want to add this CSS code to cause the table to maintain equal dimensions both vertically and horizontally at all times:

https://gist.github.com/danbru1989/5d2647b7e6a6b68d7d091c25a7bf45ea

The key is in the use of the vw CSS unit. W3 defines this as, “Relative to 1% of the width of the viewport”. The viewport is your browser window size. Using vw’s enables you to set the height of an element to be relative to the width of the browser window. A simple solution and browser support is great too – just how we like it!

My Application

I was attempting to style the default calendar for the powerful Events Manager plugin. Making the calendar responsive horizontally is quite easy enough, but the vertical cell height threw me for a loop until I came up with this.

Please comment below if you have any improvements for my solution or if you have any questions about how to make the default Events Manager calendar fully responsive. I’d be glad to hear from you!

Filed Under: Tips & Code Snippets

About Dan Brubaker

I am a husband, father, evangelist, web designer, and sometimes farmer. My family and I live full-time in an RV and travel around representing Servant's Heart Camp. My workspace is small, but the window view is great!

Reader Interactions

Comments

  1. Iggi says

    November 2, 2017 at 5:27 PM

    Good to know about vw! It didn’t work quite right when I did it on the tr, but doing it for my td’s worked perfect!

    Reply
    • Dan Brubaker says

      November 7, 2017 at 9:00 AM

      Glad it helped you out! Tr may not work all the time depending on your situation. You did the right thing and tried it on the td instead.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Contact Me

  • (717) 991-1426
  • danbru@gmail.com

Mailing Address:


5050 Colebrook Road
Hershey, PA 17033

RSS Ministry Updates

  • Ministry Changes & Moving November 4, 2020
  • Revival Ministry and HFA Crusade September 23, 2020
  • Attend Our Online Rally! April 16, 2020
  • Winter Ministry & Outreach February 11, 2020
  • Happy New Year! January 1, 2020
  • Last Meeting And Winter Work November 18, 2019
  • Continued Fall Revival Meetings November 4, 2019
  • Visiting The Quecreek Mine Rescue October 14, 2019
  • Menu
  • Back to Top
  • Services
    • Web Design
    • Graphic Design
    • Web Hosting
  • Portfolio
  • Pricing
    • FAQ’s
  • About Me
    • Blog
    • Contact

    Services

  • Web Design
  • Graphic Design
  • Web Hosting

    Information

  • About Me
  • Portfolio
  • Pricing
  • Privacy

    Contact Me

  • (717) 991-1426
  • danbru@gmail.com
Log In
Copyright © 2023 — Brubaker Design Services