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

在这里，我将两个表格元素放在div中。浏览器窗口的缩放级别为100%，表格宽度没有问题。如果我们从100%增加或减少缩放级别，表格宽度将发生更改，如下图所示

HTML代码

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

脚本代码

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


    });

$（文档）.ready（函数（）{
var totalWidth=1000；
var$fitst=$（“第一”）；
var x=200；
而（x您可以通过为两个表指定宽度来解决此问题

添加以下CSS规则：

table {
    width: 100%;
}

此外，还需要确保父容器的宽度可以容纳
表格单元格内容，包括具有指定宽度的
div

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

如果按以下方式更改内联样式：

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

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

您可以根据需要重复
.timeUnit

对于CSS：

.parent{
高度：40px；
背景颜色：绿色；
溢出：自动；/*用于封闭浮动*/
宽度：1000px；/*设置为n x 200，其中n是时间单位的数量*/
}
.时间单位{
左边框：1px实心橙色；
背景：浅灰色；
宽度：199px；
身高：继承；
浮动：左；
}
.滴答声单元{
左边框：1px实心橙色；
宽度：24px；
身高：50%；
浮动：左；
位置：相对位置；
最高：50%；
}
.1.t1{
左边界：无；
}

从块级元素
.timeUnit
开始，具有左边框和199px的宽度
然后向左浮动

在
.timeUnit
中，放置8个子div，
.tickUnit
，宽度为24px加1px
边框。将高度设置为50%，然后使用相对定位向下移动到底部
边缘

最后，删除第一个勾号单元上的左边框

请参见演示：

更多使用CSS表格单元格的防弹版本

当缩放到极限时，浮动往往会显示怪癖

我将按如下方式构建HTML：

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

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

将CSS表格与
display:inline table
一起使用，在
.timeUnit
块上有一个左边框
然后
在子
上显示：表格单元格
。单位
，宽度为12.5%

最后，使用伪元素来放置半高小记号

请参见演示：

CSS表格单元格似乎最适合放大/缩小。
这里我设置了
td
第一个表格的宽度为200px，第二个表格的宽度为25px（8x25=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>




我尝试了这个方法，但问题并没有解决fixed@Sindhu我找到了一个修复程序，请看一看。@MarcAudet我正在用110%检查它不是fixed@Sam1604什么浏览器？我在Firefox中检查了小提琴，它似乎可以工作……我会再测试一些。@MarcAudet我正在使用Google ChromeMy我的第一个建议是简化HTML/CSS。你有很多不必要的东西ary样式，不做任何事情（如表格单元格上的
位置：静态
和
高度：100%
）。那么您真的需要单元格内的div吗？这可能是一种更干净的方法。由于指定
td
的宽度可以解决问题，这表明根本原因与表格如何计算表格单元格宽度有关。但是，关键是要确保父块具有足够的宽度来生成表格。@Marc谢谢你审阅我的答案。我对你的评论很满意。