避免 DIV 表头上的正文滚动宽度答案

【问题标题】：Avoid body scroll width on DIV table header避免 DIV 表头上的正文滚动宽度
【发布时间】：2014-03-12 21:00:20
【问题描述】：

我有一个 DIV 表，其中一个 DIV 作为标题，另一个 DIV 称为“tableContent”，其中包含几个 DIVS 作为内容。每行（包括标题）的每个第一个 DIv 为 60%，第二个为 20%，其他两个为 10%。 --- JSFIDDLE DEMO

问题出在tableContent 上的overflow-y:scroll 属性上，这是必需的，因为tableContent 具有固定的高度，并且所有溢出的内容都必须通过滚动才能看到。您可以在这里看到由于此导致的表格不平衡：标题和内容列的宽度不同：

这是因为现在tableContent 的 100% 包含滚动的 16 像素

如何使标题 div 和内容 div 具有相同的最终宽度？

HTML 代码：

<div class="tableWrap">
<div class="tableHeader">
            <div class="contentColumn60 tableHeaderColumn">
                <span class="tableHeaderText">Turno</span>
            </div>
            <div class="contentColumn20 tableHeaderColumn">
                <span class="tableHeaderText">Tipo</span>
            </div>
            <div class="contentColumn10 tableHeaderColumn">
                <span class="tableHeaderText">Editar</span>
            </div>
            <div class="contentColumn10 tableHeaderColumn">
                <span class="tableHeaderText">Estado</span>
            </div>

</div>

<div data-id="226" class="tableRow ">
    <div class="contentColumn60">
    <span class="tableContentText">Fín de semana 1 (09:00 - 13:00)</span>
</div>
<div class="contentColumn20">
    <span class="tableContentText">Mañana</span>
</div>
<div class="contentColumn10">
    <div class="tableIconLink"><a href="#"><div title="Fín de semana 1 (09:00 - 13:00)" data-id="226" class="editIcon" style="opacity: 0.5;"></div></a></div>
</div>
<div class="contentColumn10">
    <div class="tableIconLink"><a href="/Gestion/config/forms/turn_conf/turn_discontinue.php?id=226"><div class="discontinueIcon"></div></a></div>
    </div>
</div>

    <div data-id="226" class="tableRow ">
    <div class="contentColumn60">
    <span class="tableContentText">Fín de semana 1 (09:00 - 13:00)</span>
</div>
<div class="contentColumn20">
    <span class="tableContentText">Mañana</span>
</div>
<div class="contentColumn10">
    <div class="tableIconLink"><a href="#"><div title="Fín de semana 1 (09:00 - 13:00)" data-id="226" class="editIcon" style="opacity: 0.5;"></div></a></div>
</div>
<div class="contentColumn10">
    <div class="tableIconLink"><a href="/Gestion/config/forms/turn_conf/turn_discontinue.php?id=226"><div class="discontinueIcon"></div></a></div>
    </div>
</div>

    <div data-id="226" class="tableRow ">
    <div class="contentColumn60">
    <span class="tableContentText">Fín de semana 1 (09:00 - 13:00)</span>
</div>
<div class="contentColumn20">
    <span class="tableContentText">Mañana</span>
</div>
<div class="contentColumn10">
    <div class="tableIconLink"><a href="#"><div title="Fín de semana 1 (09:00 - 13:00)" data-id="226" class="editIcon" style="opacity: 0.5;"></div></a></div>
</div>
<div class="contentColumn10">
    <div class="tableIconLink"><a href="/Gestion/config/forms/turn_conf/turn_discontinue.php?id=226"><div class="discontinueIcon"></div></a></div>
    </div>
</div>

    <div data-id="226" class="tableRow ">
    <div class="contentColumn60">
    <span class="tableContentText">Fín de semana 1 (09:00 - 13:00)</span>
</div>
<div class="contentColumn20">
    <span class="tableContentText">Mañana</span>
</div>
<div class="contentColumn10">
    <div class="tableIconLink"><a href="#"><div title="Fín de semana 1 (09:00 - 13:00)" data-id="226" class="editIcon" style="opacity: 0.5;"></div></a></div>
</div>
<div class="contentColumn10">
    <div class="tableIconLink"><a href="/Gestion/config/forms/turn_conf/turn_discontinue.php?id=226"><div class="discontinueIcon"></div></a></div>
    </div>
</div>

    <div data-id="226" class="tableRow ">
    <div class="contentColumn60">
    <span class="tableContentText">Fín de semana 1 (09:00 - 13:00)</span>
</div>
<div class="contentColumn20">
    <span class="tableContentText">Mañana</span>
</div>
<div class="contentColumn10">
    <div class="tableIconLink"><a href="#"><div title="Fín de semana 1 (09:00 - 13:00)" data-id="226" class="editIcon" style="opacity: 0.5;"></div></a></div>
</div>
<div class="contentColumn10">
    <div class="tableIconLink"><a href="/Gestion/config/forms/turn_conf/turn_discontinue.php?id=226"><div class="discontinueIcon"></div></a></div>
    </div>
</div>

    <div data-id="226" class="tableRow ">
    <div class="contentColumn60">
    <span class="tableContentText">Fín de semana 1 (09:00 - 13:00)</span>
</div>
<div class="contentColumn20">
    <span class="tableContentText">Mañana</span>
</div>
<div class="contentColumn10">
    <div class="tableIconLink"><a href="#"><div title="Fín de semana 1 (09:00 - 13:00)" data-id="226" class="editIcon" style="opacity: 0.5;"></div></a></div>
</div>
<div class="contentColumn10">
    <div class="tableIconLink"><a href="/Gestion/config/forms/turn_conf/turn_discontinue.php?id=226"><div class="discontinueIcon"></div></a></div>
    </div>
</div>
</div>

CSS 代码：

.tableWrap{
    width: 100%;
    height:auto;
    border:#ccc 1px solid;
    border-radius:3px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 1px 2px #d1d1d1;
    margin: 10px 10px 0 10px;
    background: #fbfbfb;
    color:#666;
    font-size: 11px;}


.tableHeader{
    height: 40px;
    width: 100%;
    line-height: 40px;
    background: -moz-linear-gradient(center top , #EDEDED, #EBEBEB) repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: inline-block;
    font-weight: 600;
    border-bottom: 1px solid #E0E0E0;


}
.tableContent{
    width:100%;
    height: 150px;
    overflow-y:scroll;
}
.tableHeaderText{
     line-height: 40px;
     padding: 0 10px;
     text-align: center;

}

.tableRow{
    height: 36px;
    width: 100%;
    background: #fbfbfb;
}

.tableContentText{
    line-height: 36px;
    padding: 0 0 0 20px;
}

.contentColumn60{
    height: 36px;
    width: 60%;
    border-bottom:1px solid #e0e0e0;
    float: left;
}

.contentColumn20{
    height: 36px;
    width: 20%;
    border-bottom:1px solid #e0e0e0;
    border-left:1px solid #e0e0e0;
    float: left;
}

.contentColumn10{
    height: 36px;
    width: 9.5%;
    border-bottom:1px solid #e0e0e0;
    border-left:1px solid #e0e0e0;
    float: left;
    text-align: center;
}

.tableHeaderColumn{
    border-top:1px solid #fafafa;
    border-bottom: none;
}

.tableIconLink{
    text-align: center;
}

.tableContent .tableRow:hover{
    background-color: #f2f2f2;
}




.discontinueIcon{
    width: 21px;
    height: 21px;
    background-size: cover;
    background-image: url(images/error.png);
    opacity: 0.5;
    background-repeat:no-repeat;
    margin: 8px auto;
    display: block;
}

.editIcon{
    width: 21px;
    height: 21px;
    background-size: cover;
    background-image: url(images/edit.png);
    opacity: 0.5;
    background-repeat:no-repeat;
    margin: 8px auto;
    display: block;
}

【问题讨论】：

JSFIDDLE 链接已更改。现在它正确显示了问题
请参阅 JSFIDDLE 链接，阅读说明，如果不清楚，请询问我任何具体问题以便正确解释。谢谢。
“标题 div 固定宽度”是什么意思。你想让标题 div 与表格宽度相同吗？
我需要头部的每个 DIV 与内容上的每个 DIV 具有相同的宽度。内容具有较小的 DIVS，因为其 100% 包括来自滚动条的 16 像素，因为这不会发生在头部，主体的 div 和头部的 div 具有最终不同的宽度，即使它们同时具有 60%、20%、10% 和 10% 宽度.
问题已编辑以避免误解，感谢 fos 询问@BikashChandraMondal

标签： css html

【解决方案1】：

您可以使用 CSS3 calc 来计算滚动条的大小

.tableHeader {
    width: -moz-calc(100% - 17px);
    width: -webkit-calc(100% - 17px);
    width: -o-calc(100% - 17px);
    width: calc(100% - 17px);
}

还有其他方法可以通过在标题包装器的右侧添加填充来实现。

为此，您需要添加以下内容：

.tableHeader {
    padding-right:17px;
   -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;     /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

【讨论】：

已解决。谢谢你。在这种情况下，这个项目是一个仅为 Moz 运行的 ERP，所以这种方式适合我。非常感谢。
不客气 Biomehanika。谢谢@davidkonrad，那个网站对我来说是新的！
+1 只是说，但如果它是针对已知用户组的 ERP，那么 calc 是一个很好的解决方案。
为了完整起见，我在答案中添加了第二种方法，它不使用calc，而是使用padding 和box-sizing，这得到了更广泛的支持。 caniuse.com/css3-boxsizing