html - 使用 table-cell 填充其余的 div

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>

如果你需要，这里有一把 fiddle http://jsfiddle.net/tR7WX/

Answer 1

只需将此规则添加到您的样式中:

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

顺便说一句，您不必为每个级别的标签都创建一个类。您可以使用 CSS 节点规则来选择特定标签并应用样式。如果您这样做，您会得到一个更简单(更轻便)的 HTML 文件。