Html css number keypad align issue

Question

I have this number keypad using html and css. Now im facing some alignment issue from 3rd row and ok button. I tried with all the row as new tables, so i can do ok button on the number pad.

    <div class="keyboard">
        <table class="numbersButtons">
            <tbody>
                <tr class="quickPickButtons row">
                    <td class="button">+5</td>
                    <td class="button">+10</td>
                    <td class="button">+20</td>
                    <td class="button">+50</td>
                </tr>
                <tr class="row">
                    <td class="button">1</td>
                    <td class="button">2</td>
                    <td class="button">3</td>
                    <td class="button">X</td>
                </tr>
            </tbody>
        </table>
        <table class="numbersButtons3">
            <tbody>
                <tr class="row">
                    <td class="button">OK</td>
                </tr>
            </tbody>
        </table>
        <table class="numbersButtons4">
            <tbody>
                <tr class="row">
                    <td class="button">4</td>
                    <td class="button">5</td>
                    <td class="button">6</td>
                </tr>
                <tr class="row">
                    <td class="button">7</td>
                    <td class="button">8</td>
                    <td class="button">9</td>
                </tr>
            </tbody>
        </table>
        <table class="numbersButtons2">
            <tbody>
                <tr class="lastRow">
                    <td class="button zero">0</td>
                    <td class="button dot">.</td>
                </tr>
            </tbody>
        </table>
    </div>

I don't understand why use multiple table when you can do it with just one — Simone Rossaini, May 04 '21 at 06:19
No, in my opinion it is the opposite, try to align several tables rather than just one no :)? — Simone Rossaini, May 04 '21 at 06:24

score 2 · Accepted Answer · answered May 04 '21 at 06:31

As i said into comment one table is pretty simple to do

.keyboard {
  display: flex;
  flex-shrink: 0;
  padding: 3px;
  background: #000000;
  flex-direction: column;
  /*touch-action: none;*/
}

.numbersButtons {
  width: calc(100% - 1px);
}

.quickPickButtons {
  width: 25%;
}

.row {}

.keyboard td {
  padding: 0;
  margin: 0;
}

.button {
  position: relative;
  height: 25px;
  width: 25%;
  line-height: 25px;
  text-align: center;
  color: #ffffff;
  background: #333333;
  margin: 1px;
  font-size: 22px;
  /*touch-action: none;*/
}

.numbersButtons .row:first-child .button:first-child {
  border-radius: 5px 0 0 0;
}

.numbersButtons .row:first-child .button:last-child {
  border-radius: 0 5px 0 0;
}


/*.numbersButtons .row:last-child .button:first-child { border-radius: 0 0 0 5px; } .numbersButtons .row:last-child .button:last-child { border-radius: 0 0 5px 0; }*/

.numbersButtons .row:third-child .button:last-child {
  height: 50px;
  background: red;
}

.numbersButtons2 {
  width: 75%;
  -webkit-border-vertical-spacing: 0;
}

.numbersButtons3 {
  width: 25.1%;
  height: 75px;
  margin-left: 75%;
  -webkit-border-vertical-spacing: 0;
}

.numbersButtons4 {
  width: 75%;
  margin-top: -76px;
}

.lastRow {}

.zero {
  width: 66.65%;
}

.dot {
  width: 33.35%;
}

.numbersButtons2 .lastRow:last-child .button:first-child {
  border-radius: 0 0 0 5px;
}

.numbersButtons2 .lastRow:last-child .button:last-child {
  border-radius: 0 0 5px 0;
}

.quickPickButtons .button {
  background: #4caf50;
  color: #ffffff;
}

.quickPickButtons .row:first-child .button {
  border-radius: 5px 5px 0 0;
}

.quickPickButtons .row:last-child .button {
  border-radius: 0 0 5px 5px;
}

.button.pressed {
  background: #000000;
  color: #ffffff;
}

.deleteIcon {
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="keyboard">
  <table class="numbersButtons">
    <tbody>
      <tr class="quickPickButtons row">
        <td class="button">+5</td>
        <td class="button">+10</td>
        <td class="button">+20</td>
        <td class="button">+50</td>
      </tr>
      <tr class="row">
        <td class="button">1</td>
        <td class="button">2</td>
        <td class="button">3</td>
        <td class="button">X</td>
      </tr>
      <tr class="row">
        <td class="button">4</td>
        <td class="button">5</td>
        <td class="button">6</td>
        <td class="button" rowspan="3">OK</td>
      </tr>
      <tr class="row">
        <td class="button">7</td>
        <td class="button">8</td>
        <td class="button">9</td>
      </tr>
      <tr class="lastRow">
        <td class="button zero" colspan="2">0</td>
        <td class="button dot">.</td>
      </tr>
    </tbody>
  </table>
</div>

Good resource:

How do you use colspan and rowspan in HTML tables?

julien.giband · Answer 2 · 2021-05-04T13:45:15.230

Simplest solution: use grid !

/* -- Layout -- */

.keyboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-template-areas:
    "q1 q2 q3 q4"
    "d1 d2 d3 X"
    "d4 d5 d6 ok"
    "d7 d8 d9 ok"
    "o  o  dt ok";
  gap: 2px;
  padding: 4px;
}

#ok {
  grid-area: ok;
}

#d0 {
  grid-area: o;
}

/* -- Layout DONE. The rest is decoration -- */

/* colors and fonts */

.keyboard {
  background: black;
  border-radius: 7px;
  font-size: 22px;
}

.keyboard button {
  color: #ffffff;
  background: #333333;
  border: none;
  font-size: inherit;
}

.keyboard button.quickpick {
  background: #4caf50;
  color: #ffffff;
}

/* button hover/focus/active */

.keyboard button:hover {
  filter: brightness(120%);
}

.keyboard button:focus {
  outline: 1.5px solid rgba(255, 255, 255, .5);
}

.keyboard button:active {
  filter: brightness(60%);
}

/* border radii for buttons */

.keyboard button:first-child {  /* upper-left */
  border-radius: 5px 0 0 0;
}

.keyboard button:nth-child(4) { /* upper-right */
  border-radius: 0 5px 0 0;
}

.keyboard button:last-child {   /* lower-right */
  border-radius: 0 0 5px 0;
}

.keyboard button#d0 {           /* lower-left */
  border-radius: 0 0 0 5px;
}

<div class="keyboard">
  <button id="plus-5" class="quickpick">+5</button>
  <button id="plus-10" class="quickpick">+10</button>
  <button id="plus-20" class="quickpick">+20</button>
  <button id="plus-50" class="quickpick">+50</button>

  <button id="d1">1</button>
  <button id="d2">2</button>
  <button id="d3">3</button>
  <button id="multiply">X</button>

  <button id="ok">OK</button>

  <button id="d4">4</button>
  <button id="d5">5</button>
  <button id="d6">6</button>

  <button id="d7">7</button>
  <button id="d8">8</button>
  <button id="d9">9</button>

  <button id="d0">0</button>
  <button id="dot">.</button>
</div>

Html css number keypad align issue

2 Answers2