Create a responsive table that contains circles

Question

I created a table with circles that contain numbers. I set up a solution with Bootstrap that works quite well but it becomes more complex to make this table responsive.

Indeed, depending on the size of my window, I would like my table to always be a "square". That is, the margin between each circle must be equal, whether horizontally or vertically. My circles don't have a fixed size, they have to evolve with the size of the table.

My solution has a few problems :

I have to use a script to force the responsive of my table at page load and at each resize of my page.
The table is not centered correctly on my page

I wonder if my solution can't be optimized by avoiding the use of JS to make my board responsive. Any suggestion is welcome. Thanks in advance.

$(document).ready(function() {
    resizeTab();

    window.onresize = function(){
        resizeTab();
    };
});

function resizeTab() {
    var mainHeight = $('#main-panel').height();
    var mainWidth = $('#main-panel').width();
    if (mainWidth > mainHeight) {
        $('#my-tab').width($('#main-panel').height());
    } else {
        $('#my-tab').width($('#main-panel').width());
    }
}

#viewport{
    height: 100vh;
    display: flex;
}

#left-panel, #right-panel {
    height: 100%;
    width: 300px;
    background-color: #000;
}

#main-panel {
    height: 100%;
    padding: 50px;
    flex-grow: 2;
}

#my-tab {
    margin: auto;
    text-align: center;
}

#my-tab td {
    border: 0;
}

#my-tab td .number {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
}

#my-tab td .number span {
    color: rgb(44, 68, 84);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    left: 0%;
    font-family: "RobotCondensed";
    font-weight: 100;
    font-size: 3vh;
    font-weight: 500;
    border: 2px solid rgba(96, 139, 168, .4);
    background-color: rgba(96, 139, 168, .2);
    border-radius: 5px;
    border-radius: 50%;
}

Richard Hunter · Accepted Answer

Here is my solution with a table.

body {
  min-height: 100vh;
  display: flex;
}

table {
  table-layout: fixed;
  margin: auto;
  width: 50vw;
  font-size: 10vw;
}

td {
  padding: 0 !important;
}

.number {
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}

.number span {
  display: inline-block;
  color: rgb(44, 68, 84);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 80%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "RobotCondensed";
  font-size: 10%;
  font-weight: 500;
  border: 2px solid rgba(96, 139, 168, .4);
  background-color: rgba(96, 139, 168, .2);
  border-radius: 50%;
}

But I would probably prefer not to use a table, mainly because they can be a little tricky to style at times, and because organising a sequence of number into groups of ten seems wrong semantically to me (I think it should just be one continuous sequence). So here's my solution just using divs. Also, I've used a CSS counter to generate the numbers.

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
}

.table {
  margin: auto;
  counter-reset: tableCounter;
  width: 50vw;
  font-size: 1vw;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.table>div {
  counter-increment: tableCounter;
  position: relative;
  padding: 0;
  padding-bottom: 100%;
}

.table>div:before,
.table>div:after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.table>div:before {
  content: '';
  padding: 30%;
  border-radius: 50%;
  background: rgba(96, 139, 168, .2);
  box-shadow: 0 0 0px 0.3vw rgba(96, 139, 168, .4);
}

.table>div:after {
  position: absolute;
  display: inline-block;
  color: rgb(44, 68, 84);
  content: counter(tableCounter);
}

Create a responsive table that contains circles

Answers (1)

Related Questions