Chrome distorts the display:table when zoomed in

Question

Chrome distorts the display:table when zoomed in

Consider this CSS snippet:

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

Now, let's add some HTML to go along with it:

<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>

At 100% zoom level, everything looks fine. But when we zoom in to 400%, then reset to 100%, things get messy.

If you want to see an example, check out this fiddle.

Unfortunately, Chrome versions 28, 29, and 30 seem to have trouble handling the spacing with this setup. Firefox, Safari, Opera are unaffected, and surprisingly Internet Explorer does not cause issues either.

Other than ditching

display:table/table-row/table-cell

, is there a way to adjust the HTML/CSS so that Chrome respects spacing even after zooming?

html css google-chrome tablerow tablecell

Answer 1

Answer №1

The data you have appears to not be in a tabular format, but there are alternative methods to achieve the same results. Instead of using a table structure like 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>

You can try using a list with spans for alignment, like so:

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

For better control over spacing, you can utilize the following CSS:

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

ul li {
    margin-top: 10px;
}

If you prefer a tabular layout, consider using the table element:

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

This can be simplified to:

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

Some optimizations for your CSS include targeting specific elements within the table:

.table > div {
   /* Remove the need for all classes named table-row */
}

.table > div > div {
   /* Remove the necessity of table-cell classes for styling */
}

Answer 2

The data you have appears to not be in a tabular format, but there are alternative methods to achieve the same results. Instead of using a table structure like 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>

You can try using a list with spans for alignment, like so:

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

For better control over spacing, you can utilize the following CSS:

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

ul li {
    margin-top: 10px;
}

If you prefer a tabular layout, consider using the table element:

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

This can be simplified to:

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

Some optimizations for your CSS include targeting specific elements within the table:

.table > div {
   /* Remove the need for all classes named table-row */
}

.table > div > div {
   /* Remove the necessity of table-cell classes for styling */
}

Chrome distorts the display:table when zoomed in

Answer №1

Similar questions

Generating output into several spans of identical class using JavaScript with compatibility for IE8

Error: ShowModalEdituser has not been defined

Tips and tricks for locating the xpath of a header title using Selenium Webdriver and Java

Generate and delete dynamic iFrames through variable manipulation

What steps do I need to take in order to successfully make a checkbox?

A single click causes the entire row of cards to extend seamlessly

Creating a stylish CSS shadow effect for a collection of elements

What measures are in place to prevent content from being copied on this website?

Encountering an inexplicable "undefined" error in HTML after receiving an

transferring background-image in html between elements

Learn how to enable or disable a specific JavaScript script by clicking on a toggle button

My project is experiencing issues with the execution of JavaScript codes

Stop the entire page from scrolling in Next JS, while still enabling individual components to scroll

Show the Canvas element at the back of the DIV

Switch the color (make it gray) of the selected tab in the navigation bar

Sorting through various data inputs in one JSON file

Show images aligned in the center with proper positioning

Retrieve the input value closest to the selected row

Parallax effect overlay for DIV

Issue with Bootstrap 4 progress bar malfunctioning in popover due to CSS property restrictions within the popover container