使用表格填充其余部分

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

来源

2014-02-19 Josh Luke Blease

它需要*代码的所有*来重现问题？ – cimmanon

这个规则只需添加到您的风格：

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

顺便说一句，你没有义务为每一级标签都有一个类。您可以使用CSS节点规则选择特定标签并应用样式。如果你喜欢它，你会得到一个更简单（更轻）的HTML文件。

来源

2014-02-19 22:21:09

为所有标签添加类是所有“酷”的孩子现在所做的。 – cimmanon

这并没有解决这个问题，如果你在大屏幕上看我的例子，你会发现中间线不会继续穿过屏幕。我相信这是因为“TodayInfo”类不能填充表格的其余部分。 –

是否有一个特定的原因，你为什么不使用这个表？我知道表格经常被视为老派，但你已经有了表格数据和需要表格逻辑的场景。我认为使用DIV和CSS来复制表格会很复杂，很难更改/维护，并且使其非常脆弱。

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

对不起，如果我误解了任何东西。

来源

2014-03-05 11:23:46

使用表格填充其余部分

回答

相关问题