Question

我一直在这个工作两天，我无法弄清楚如何使这项工作。

我在我网站的主页上有一个基于表格的图表显示。这些图表小而紧凑。我有它，所以当你点击其中一个图表时，会弹出一个展开的视图，其中包含更大的图表视图，也可以组织为一个表格。此视图是一个固定的居中div，覆盖屏幕的80％x80％，内部有一个桌子。我希望这个表填充div的内部宽度并可以滚动。该表有3列，我希望每个列宽33.3％，以便均匀分布每一列。

HTML：

<div id="expandedViewContainer">
    <div id="expandedView">
        <table id="expandedViewTable">
            <tr class="expandedViewRow">
                <td class="expandedViewCell">
                    <div class="expandedChart"></div>
                </td>
                <td class="expandedViewCell">
                    <div class="expandedChart"></div>
                </td>
                <td class="expandedViewCell">
                    <div class="expandedChart"></div>
                </td>
            </tr>
            ...
        </table>
    </div>
</div>

CSS：

#expandedViewContainer {
    display:none; /*The view is initially hidden*/
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.25);
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
}
#expandedView {
    width:80%;
    height:80%;
    background-color:#ADC4DB;
    padding:20px;
    border-radius:10px;
    overflow-y:auto;
    margin:0 auto;
    margin-top:25px;
}
#expandedViewTable {
    /*I'm expecting this to mean 100% of the inner width of #expandedView,
    but I can't be sure what's happening here*/
    width:100%; 
}
.expandedViewRow {
    height:300px;
}
.expandedViewCell {
    width:33.3px;
}
.expandedChart {
    width:100%;
    height:100%;
    margin:0 30px;
}

由于某种原因，表格正在超出#expandedView的宽度。有些图表非常广泛。我不确定我应该设置为width:100%以及我应该将其设置为width:33.3%。

仅供参考，我正在使用HighCharts生成图表，并将.expandedChart作为容器。我想知道这是否与正在设置的宽度有关。

如何在div中为表格均匀设置列宽

0 个答案: