Question

我正在尝试创建一个表，其中表的最后一列填充表的其余部分。我正在使用div来设计表格并使用div的边框来构建每个元素之间的边框，但是如果你查看我的链接http://subjectplanner.co.uk/Me/test.php，你会看到最后的元素没有填满结尾导致边界不足的表格。

CSS

.Larger{
    font-size: 125%;
}
.Smaller{
    font-size: 85%;
}
.Block{
    display: block;
}
.TodayList{
    font-family:'Proxima Nova',Helvetica,Arial,sans-serif;
    display:table;
    width:100%;
    margin:0 0 1em 0;
    -webkit-border-radius:15px;
    border-radius:15px;
    overflow:hidden;
    border:0 none;
    border-collapse:collapse;
    background-color:#247B2B;
    font-size:1.5em;
    position:relative;
    padding:0;
}
.TodayItem{
    position:relative;
    display:table-row;
    border-collapse:collapse;
    overflow:hidden;
    color:#70BB75;
    -webkit-transition:background-color 0.2s linear;
    -moz-transition:background-color 0.2s linear;
    -o-transition:background-color 0.2s linear;
    -ms-transition:background-color 0.2s linear;
    transition:background-color 0.2s linear;
    background-color:rgba(0,0,0,0.001);
}
.TodayItem:hover{
    background-color:#95FA9D;
}
.TodayItem a{
    color:#fff;
}
.TodayItem .smaller,.TodayItem .TodayInfo{
    color:#fff;
}
.TodayItemWrapper{
    display:block;
    position:relative;
    overflow:hidden;
    height:100%;
    width:100%;
}
.TodayIcon,.TodayTitle,.TodayInfo{
    display:table-cell;
    border-collapse:collapse;
    border:1px solid #31AE33;
    border-width:0 1px 1px 0;
    padding:2em;
    margin:0;
    font-size:100%;
    min-height:120px;
    font-weight:normal;
}
.TodayItem:last-of-type .TodayIcon,.TodayItem:last-of-type .TodayTitle,.TodayItem:last-of-type .TodayInfo{
    border-bottom-width:0;
}
.TodayIcon{
    width:130px;
    vertical-align:middle;
    text-align:center;
}
.TodayTitle{
    width:260px;
}
.TodayInfo{
    border-right-width:0;
}
.TodayTitle a{
    text-decoration:none;
}
.TodayTitle a:hover{
    text-decoration:underline;
}
.TodayLink{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.001);
    vertical-align:top;
    z-index:2;
}

HTML

<ul class="TodayList">
    <li class="TodayItem">
        <div class="TodayItemWrapper">
            <span class="TodayIcon"></span>
            <h3 class="TodayTitle">
                <a href="Monday" class="Block Larger">Monday<span class="TodayLink"></span></a> <span class="Block Smaller">You've 3 lessons today</span>
            </h3>
            <div class="TodayInfo">
            <ul>
                <li>9 - 10: Maths</li>
                <li>10 - 11: English</li>
                <li>12 - 13: ICT</li>
            </ul>
            </div>
        </div>
    </li>
    <li class="TodayItem">
        <div class="TodayItemWrapper">
            <span class="TodayIcon"></span>
            <h3 class="TodayTitle">
                <a href="Tuseday" class="Block Larger">Tuesday<span class="TodayLink"></span></a> <span class="Block Smaller">You've 2 lessons on this day</span>
            </h3>
            <div class="TodayInfo">
            <ul>
                <li>10 - 11: Art</li>
                <li>11 - 13: Double Business</li>
            </ul>
            </div>
        </div>
    </li>
</ul>

如果你想要http://jsfiddle.net/tR7WX/

，这是一个小提琴

Answer 1

只需将此规则添加到您的风格中：

 ul.TodayList>li:last-child {
     width:100%;
 }

顺便说一下，你没有义务为每个级别的标签提供课程。您可以使用CSS节点规则来选择特定标记并应用样式。如果你这样做，你会得到一个更简单（更轻）的HTML文件。

Answer 2

为什么你没有使用表格的特定原因？我知道表通常被视为旧学校，但是你在这里有表数据和需要表逻辑的场景。我认为使用DIV和CSS来复制表会很复杂，很难改变/维护并使其非常脆弱。

另一种可能的解决方案是根本不使用table-cell而是使用百分比宽度的DIV，因此它们总是填充总宽度。然后，您可以在每个DIV内部使用display：table来垂直居中内容。

对不起，如果我误解了什么。

使用table-cell填充div的其余部分

2 个答案: