Resize by fixed value using CSS

Question

I'm using CSS resize:both; property to let users resize my content. See the code below.

.foo {
    resize: both;
    min-width: 250px;
    width: auto;
    text-align: center;
    min-height: 30px;
    border: 1px solid #515151;
    border-radius: 6px;
    position: absolute;
    padding: 0;
    overflow: hidden;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
    box-shadow: 5px 5px rgba(0,0,0, 0.1);
}
.thClass {
    margin-left: -3px;
    text-align: center;
    box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    margin-top: -2px;
    min-height: 30px;
    line-height: 30px;
    font-size: 19px;
    cursor: move;
}
.header{
    margin-left: 17px;
}
.tableBody {
    display: block;
    min-height: 25px;
    text-align: center;
    width: 102%;
    margin-left: -2px;
    cursor: default;
}
.foo tbody tr td {
    display: block;
    line-height: 25px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
#displaySizes {
    list-style: none;
    padding: 0;
    margin-top: 0;
}
.disp tbody tr th {
    border: 1px solid black;
}
.disp tbody tr td {
    display: table-cell;
}

<table class="foo disp elementTable">
                <tr class="tableHeader">
                    <th class="thClass" colspan="5">
                        <span class="header">Device</span>
                    </th>
                </tr>
                <tr>
                    <td rowspan="4" id="sizeContainer">
                        <ul id="displaySizes">
                            <li>4:3</li>
                            <li>16:9</li>
                            <li>Clock</li>
                        </ul>
                    </td>
                    <td>$100</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
            </table>

Is there a way to resize this table step by step using CSS, for example, by [10,10] pixels? JavaScript is also OK. I've searched the web, but could not find anything. Here is the working fiddle for you to play with code.

Answer 1

That's a good point , So It's possible using the css-element-queries Library , All you have is creating a ResizeSensor() for your table and then make calculation to set both height and width range change :

See below Snippet :

var width = $('.elementTable').width();
var height = $('.elementTable').height();
var changePX = 50;


new ResizeSensor(jQuery('.elementTable'), function(){ 

    //width calcuation 
    if(Math.abs($('.elementTable').width()-width) > changePX) {
      $('.elementTable').width() > width ? width +=changePX : width -=changePX;
    }
    $('.elementTable').width(width);
    
    //height calcuation 
    if(Math.abs($('.elementTable').height()-height) > changePX) {
      $('.elementTable').height() > height ? height +=changePX : height -=changePX;
    }
    $('.elementTable').height(height);
    
})

.foo {
    resize: both;
    min-width: 250px;
    width: auto;
    text-align: center;
    min-height: 30px;
    border: 1px solid #515151;
    border-radius: 6px;
    position: absolute;
    padding: 0;
    overflow: hidden;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
    box-shadow: 5px 5px rgba(0,0,0, 0.1);
}
.thClass {
    margin-left: -3px;
    text-align: center;
    box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    margin-top: -2px;
    min-height: 30px;
    line-height: 30px;
    font-size: 19px;
    cursor: move;
}
.header{
    margin-left: 17px;
}
.tableBody {
    display: block;
    min-height: 25px;
    text-align: center;
    width: 102%;
    margin-left: -2px;
    cursor: default;
}
.foo tbody tr td {
    display: block;
    line-height: 25px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
#displaySizes {
    list-style: none;
    padding: 0;
    margin-top: 0;
}
.disp tbody tr th {
    border: 1px solid black;
}
.disp tbody tr td {
    display: table-cell;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ResizeSensor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ElementQueries.min.js"></script>
<table class="foo disp elementTable">
                <tr class="tableHeader">
                    <th class="thClass" colspan="5">
                        <span class="header">Device</span>
                    </th>
                </tr>
                <tr>
                    <td rowspan="4" id="sizeContainer">
                        <ul id="displaySizes">
                            <li>4:3</li>
                            <li>16:9</li>
                            <li>Clock</li>
                        </ul>
                    </td>
                    <td>$100</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
            </table>

Answer 2

Here's a solution I put together that will snap to given grid on resize (in this example 20px.)

It uses "cross browser resize event listener", that a another developer has put together (source):

Basically it just listens to the resize event, then sets the styles for width and height using javascript.

Fiddle here:

https://jsfiddle.net/treetop1500/co8zbatz/

// utility function for rounding (20px in this case)
function round20(x)
{
    return Math.ceil(x/20)*20;
}

// Attach listener
var myElement = document.getElementById('resize'),
    myResizeFn = function(){
        h = round20(parseInt(this.style.height,10));
        w = round20(parseInt(this.style.width,10));
        this.style.height = h + "px";
        this.style.width = w + "px";
    };

addResizeListener(myElement, myResizeFn);