Question

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

overflow-y:scroll上的tableContent属性出现问题，因为tableContent具有固定的高度，所有溢出的内容都必须通过滚动来查看。您可以在此处看到由此引起的表不平衡：header和conten列的宽度不同：

imbalance

这是因为现在100％的tableContent包含了16px的滚动

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

HTML code：

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

Answer 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+ */
}

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

1 个答案: