Question

这里我在div中放置两个表格元素。浏览器窗口缩放级别为100％表格宽度没有问题。如果我们增加或减少100％表格宽度的缩放级别，就像下面的图像一样。

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

脚本代码

      $(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);


    });

此问题将在所有浏览器中发生。请任何人帮我解决此问题

Answer 1

这里我设置td第一个表的宽度是200px，第二个表td的宽度是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>

的 Demo

Check at Full Screen Mode

Answer 2

您可以通过为两个表分配宽度来解决问题。

添加以下CSS规则：

table {
    width: 100%;
}

此外，您需要确保父容器的宽度可以容纳表格单元格内容，由具有指定宽度的div组成。

在这种情况下，表格单元格的总宽度为200px。

如果您更改内联样式，如下所示：

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

将宽度设置为200px而不是191px，这似乎可以解决问题如果你正在缩小问题。

如果在width: auto上使用table（默认），则计算出的宽度略有不同的是缩小时看到的内容。该行为取决于浏览器因为CSS规范没有说明内容应该如何放大/缩小。

请参阅演示：http://jsfiddle.net/audetwebdesign/gd8hL1d9/

注意：我发现如果你放大，父亲div会再次出现宽度问题宽度为200px。但是，如果我使用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开始，左边框和宽度为199px 并向左浮动。

在.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;
}

在display: inline-table块上使用带有左边框的.timeUnit的CSS表格然后display: table-cell关于宽度为12.5％的儿童.tickUnit。

最后，使用伪元素放置半高次刻度标记。

请参阅演示：http://jsfiddle.net/audetwebdesign/skagwx61/

CSS table-cell似乎最适合放大/缩小。

缩放浏览器窗口时，两个表的宽度不同步

2 个答案:

的 Demo