Zooming messes up display:table on Chrome

Question

Take this CSS snippet:

.table {
    display:table;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
}

Alongside with some HTML:

<div class="table">
    <div class="table-row">
        <div class="table-cell">
            <label>Label One</label>
        </div>
        <div class="table-cell">
            <input type="text">
        </div>
    </div>
    <div class="table-row">
        <div class="table-cell">
            <label>Label Two</label>
        </div>
        <div class="table-cell">
            <input type="text">
        </div>
    </div>
    <div class="table-row">
        <div class="table-cell">
            <label>Label Three pushes this table</label>
        </div>
        <div class="table-cell">
            <input type="text">
        </div>
    </div>
    <div class="table-row">
        <div class="table-cell">
            <label>Label Four</label>
        </div>
        <div class="table-cell">
            <input type="text">
        </div>
    </div>
    <div class="table-row">
        <div class="table-cell">
            <label>Label Five</label>
        </div>
        <div class="table-cell">
            <input type="text">
        </div>
    </div>
</div>

Here's what it looks like with zoom: 100%:

Now, I will zoom in the page to 400%:

When I reset zoom back to 100% this is what I see:

Here is fiddle I used for this.

This messes up on Chrome 28, 29, and 30, it works fine on Firefox, Safari, Opera, and yes, Internet Explorer does not mess up the padding of these cell-rows.

Besides the obvious solution of not using display:table/table-row/table-cell, how can change the html/css in a way in which Chrome will respect spacing, regardless of zoom?

Answer 1

The data you are using doesn't look like tabular, but there are various ways to achieve the above. You can simple use a list and spans to align. So instead of using this

<div class="table-row">
    <div class="table-cell">
        <label>Label Three pushes this table</label>
    </div>
    <div class="table-cell">
        <input type="text">
        </div>
    </div>
</div>

You can use

<ul>
    <li>
        <label>Hello</label>
        <input type="text" />
    </li>
    <li>
        <label>Hello</label>
        <input type="text" />
    </li>
    <!-- Some more li elements here -->
</ul>

Demo(Looks pretty neat)

You can also use the below CSS to control the element spacings

label {
    display: inline-block;
    margin-right: 5px;
}

ul li {
    margin-top: 10px;
}

Demo 2

---

Still if you want to stick to tabular layout, I would suggest you to use table element here instead of using a whole lot of html and classes for a single cell.

For example

<div class="table-row">
    <div class="table-cell">
        <label>Label Two</label>
    </div>
    <div class="table-cell">
        <input type="text">
    </div>
</div>

Can be simply written as (Feels lot cleaner)

<tr>
  <td></td>
</tr>

---

Some CSS optimization...

If you want to target the div which is a direct child to .table you can use

.table > div {
   /* This way you can remove all classes with name table-row */
}

To target the cells, you can remove table-cell class and use

.table > div > div {
   /* This way you can remove all classes with name table-cell*/
}