Geek Answers Handbook

Width of two tables does not sync when scaling browser window

here I put two table elements inside a div. The zoom level of the browser window is 100%, there is no problem in the width of the table. If we increase or decrease the zoom level from 100% of the width of the table, this changes as shown below.

Fiddellink

zoom level is 100%

Zoom level is increased

HTML code

<div id="parent" style="height: 44px; background: green;">
    <table cellspacing="0" style="height: 100%">
        <tbody>
            <tr id="first">
            </tr>
        </tbody>
    </table>
    <table cellspacing="0" style="height: 100%">
        <tbody>
            <tr id="second">
            </tr>
        </tbody>
    </table>
</div>

CSS

body
    {
        margin:0px;
        padding:0px;
    }
    .timeUnit {
        border-spacing: 0px;
        zoom: 1;
        padding: 0;
        white-space: nowrap !important;
        border-left: 1px solid orange;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: lightgray;
        border-collapse: collapse;
    }

Script code

      $(document).ready(function () {

        var totalWidth = 1000;
        var $fitst = $("#first");

        var x = 200;
        while (x <= totalWidth) {

            var $timeUnitDiv = $('<td  class="timeUnit" style="height:100%;position : static; text-align: center;" ></td>');
            $fitst.append($timeUnitDiv);
            var $div = $('<div style="width: ' + (200 - 1) + 'px' + ';" ></div>').appendTo($timeUnitDiv);
            x += 200;
        }

        x = 25;
        $fitst = $("#second");
        while (x <= totalWidth) {

            var $timeUnitDiv = $('<td  class="timeUnit" style="height:100%;position : static; text-align: center;" ></td>');
            $fitst.append($timeUnitDiv);
            var $div = $('<div style="width: ' + (25 - 1) + 'px' + ';" ></div>').appendTo($timeUnitDiv);
            x += 25;
        }

        var $parent = $("#parent");
        $parent.width(totalWidth);


    });

This problem will occur in all browsers. Please help me solve this problem.

+4
source share
2 answers

You can fix the problem by assigning width to two tables.

Add the following CSS rule:

table {
    width: 100%;
}

, , , div .

200 .

:

<div style="height:44px;background:green;width:200px">

200px 191px, , -, , .

width: auto ( ) table, , , . CSS , /.

. : http://jsfiddle.net/audetwebdesign/gd8hL1d9/

. , , div 200 . , 220px, , . , , , , , ..

Div

:

<div class="parent">
    <div class="timeUnit">
        <div class="tickUnit t1"></div>
        <div class="tickUnit t2"></div>
        <div class="tickUnit t3"></div>
        <div class="tickUnit t4"></div>
        <div class="tickUnit t5"></div>
        <div class="tickUnit t6"></div>
        <div class="tickUnit t7"></div>
        <div class="tickUnit t8"></div>
    </div>
</div>

.timeUnit , .

CSS:

.parent {
    height: 40px;
    background-color: green;
    overflow: auto; /* to enclose the floats */
    width: 1000px; /* set to n x 200 where n is the number of time units */
}
.timeUnit {
    border-left: 1px solid orange;
    background: lightgray;
    width: 199px;
    height: inherit;
    float: left;
}
.tickUnit {
    border-left: 1px solid orange;
    width: 24px;
    height: 50%;
    float: left;
    position: relative;
    top: 50%;
}
.tickUnit.t1 {
    border-left: none;
}

.timeUnit, 199 .

.timeUnit 8 div, .tickUnit 24px 1px . 50%, .

, .

: http://jsfiddle.net/audetwebdesign/5j75Ltek/

CSS

.

HTML :

<div class="parent"><div class="timeUnit">
        <div class="tickUnit t1"></div>
        <div class="tickUnit t2"></div>
        <div class="tickUnit t3"></div>
        <div class="tickUnit t4"></div>
        <div class="tickUnit t5"></div>
        <div class="tickUnit t6"></div>
        <div class="tickUnit t7"></div>
        <div class="tickUnit t8"></div>
    </div><div class="timeUnit">
        <div class="tickUnit t1"></div>
        <div class="tickUnit t2"></div>
        <div class="tickUnit t3"></div>
        <div class="tickUnit t4"></div>
        <div class="tickUnit t5"></div>
        <div class="tickUnit t6"></div>
        <div class="tickUnit t7"></div>
        <div class="tickUnit t8"></div>
    </div></div>

, div, .

CSS:

.parent {
    height: 40px;
    background-color: green;
    overflow: hidden; /* fixes large zoom quirk */
    width: 1000px
    white-space: nowrap; /*prevents wrapping around at large zooms */
}
.timeUnit {
    border-left: 1px solid orange;
    background: lightgray;
    width: 199px;
    height: inherit;
    display: inline-table;
    vertical-align: top;
}
.tickUnit {
    width: 12.5%;
    height: 50%;
    background-color: transparent;
    display: table-cell;
    vertical-align: bottom;
}
.tickUnit:before {
    content:'\a0';
    display: inline-block;
    border-left: 1px solid orange;
}
.tickUnit.t1:before {
    border-left: none;
}

CSS display: inline-table ​​ .timeUnit display: table-cell .tickUnit 12,5%.

, , .

. : http://jsfiddle.net/audetwebdesign/skagwx61/

CSS / .

+1

td 200px td width 25px (8 x 25 = 200)

,

<div style="height:44px;background:green;width:220px">
    <table cellspacing="0" style="height: 100%">
        <tbody>
            <tr>
                <td class="timeUnit" style="height: 100%; position: static; text-align: center; width:200px;">
                    <div style="width: 100%;"></div>
                </td>
            </tr>
        </tbody>
    </table>
    <table cellspacing="0" style="height: 100%">
        <tbody>
            <tr>
                <td class="timeUnit" style="height: 100%; position: static; text-align: center; width:25px;">
                    <div style="width: 100%;"></div>
                </td>
                <td class="timeUnit" style="height: 100%; position: static; text-align: center; width:25px;">
           <div style="width: 100%;"></div>
                </td>
                <td class="timeUnit" style="height: 100%; position: static; text-align: center; width:25px;">
                  <div style="width: 100%;"></div>
                </td>
                <td class="timeUnit" style="height: 100%; position: static; text-align: center; width:25px;">
                    <div style="width: 24px;"></div>
                </td>
                <td class="timeUnit" style="height: 100%; position: static; text-align: center; width:25px;">
                    <div style="width: 24px;"></div>
                </td>
                <td class="timeUnit" style="height: 100%; position: static; text-align: center; width:25px;">
                    <div style="width: 100%;"></div>
                </td>
                <td class="timeUnit" style="height: 100%; position: static; text-align: center; width:25px;">
                   <div style="width: 100%;"></div>
                </td>
                <td class="timeUnit" style="height: 100%; position: static; text-align: center; width:25px;">
                   <div style="width: 100%;"></div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

+2

More articles:


All Articles