使用表格单元格填充 div 的其余部分答案

【问题标题】：Use table-cell to fill rest of div使用表格单元格填充 div 的其余部分
【发布时间】：2014-02-19 22:08:06
【问题描述】：

我正在尝试制作一个表格，表格的最后一列填满表格的其余部分。我正在使用 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/

【问题讨论】：

需要所有这段代码来重现问题吗？

标签： html css width css-tables

【解决方案1】：

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

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

顺便说一句，您不必为每个级别的标签都设置一个类。您可以使用 CSS 节点规则来选择特定标签并应用样式。如果您愿意，您会得到一个更简单（更轻量）的 HTML 文件。

【讨论】：

为几乎每个标签添加类是所有“酷”孩子现在所做的事情。
这还没有解决问题，如果你在大屏幕上看我的例子，你会发现中间的线没有继续穿过屏幕。我相信这是因为 TodayInfo 类没有填满表格的其余部分。

【解决方案2】：

您没有为此使用表格是否有特定原因？我知道表格通常被视为老派，但您在这里有表格数据和需要表格逻辑的场景。我认为使用 DIV 和 CSS 来复制表会很复杂，很难更改/维护，并且会变得非常脆弱。

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

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

【讨论】：