Html 如何在div中均匀设置表的列宽

我已经断断续续地做了两天了，我不知道该怎么做

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

HTML:

出于某种原因，表格的宽度超过了#expandedView的宽度。有些图表很宽。我不确定应该设置为

width:100%

的内容以及应该设置为

width:33.3%

的内容

---

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

可以添加JSFIDLE吗？如果在css中为td设置宽度，那么可以使用：table-layout.fixed；在父表上。它不会均匀地设置宽度，但会在CSS中保持宽度不变。

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

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