htmlcsstwitter-bootstrapnumeric-keypad

Create an HTML Numeric Keypad without <table> layout

I am trying to create an HTML 'numeric keypad', like those found on some keyboards. I am stumped on how to do the layout without using a table.

enter image description here

I am using Bootstrap (v3.1.1) so my first instinct was to attempt to use its col- classes to reproduce the 4 columns of keys found on a keypad. This was awkward though and I couldn't easily get the sizing of the buttons to be consistent between the different levels of nested div containers. I failed fast.

I knew I could use a <table> based layout to accomplish this easily with colspans and rowspans. But it didn't feel right using a table layout for this, because it is clearly not tabular data.

I tried to get the benefits of tables by using the CSS display property's table* values. This was cleaner than my first attempt and the classes I used were more meaningful than the Bootstrap ones I was attempting to use before. Unfortunately, I learned that display:table does not support colspan/rowspan. Here is a JSFiddle of that attempt. I tried to fake a rowspan on the tall-keys by using height: 144px; but that just increased the height of the entire row.

I gave up and ultimately created the layout with a <table>. Here is the JSFiddle.

Is there a way to create a numeric keypad without using an HTML <table>?

Note: The heights of keys can be static values (e.g. 70px) but the widths cannot. The width of the entire keypad is a variable percentage of the container, because responsive.

Solution

  • By using float behavior, you can create this with a bunch of inline-blocks. Each of the blocks are floated to the right (because the big vertical elements are on the right).

    So the buttons on the numpad are placed in the HTML from the top right corner going left. E.g. the first block is the - button, followed by *, /, Num-Lock, +, and so on.

    In order to make a double-sized vertical button, I attached the attribute v2 (you could've used classes for this, but I felt like being different), and to make a double-sized horizontal button, I attached the attribute h2.

    For a responsive layout, scroll down to the edit.

    CSS:

    container {
    width: 442px;
    border: 1px solid black;
    display: inline-block;
}

block {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 5px;
    background: red;
    float: right;
}

block[v2] {
    height: 210px;
}

block[h2] {
    width: 210px;
}

    HTML:

    <container>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block v2=""></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block v2=""></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block h2=""></block>
</container>

    JSFiddle

    Edit:

    If it has to be responsive, you can use calc and percentages to make the widths fit:

    block
{
    width: calc(25% - 10px);
    margin: 5px;
}

block[h2]
{
    width: calc(50% - 10px);
}

    JSFiddle