Я пытаюсь создать таблицу, в которой последний столбец таблицы заполняет остальную часть таблицы. Я использую divs для создания таблицы и использования границ 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/
Есть ли конкретная причина, почему вы не используете таблицу для этого? Я знаю, что таблицы часто воспринимаются как старая школа, но у вас есть данные таблицы и сценарий, требующий табличной логики. Я думаю, что использование DIV и CSS для репликации таблиц было бы сложным и сложным для изменения/поддержания и сделать его довольно хрупким.
Другим возможным решением было бы не использовать табличную ячейку вообще и вместо этого использовать DIV с процентной шириной, поэтому они всегда заполняют общую ширину. Затем вы можете иметь контейнер внутри каждого DIV с дисплеем: таблица для вертикального центрирования содержимого.
Извините, если я что-то не понял.
Просто добавьте это правило в свой стиль:
ul.TodayList>li:last-child {
width:100%;
}
Btw, вы не обязаны иметь класс для каждого уровня тега. Вы можете использовать правила узла узла CSS, чтобы выбрать определенный тег и применить стиль. Если вы поедете на это, вы получите более простой (и более легкий) HTML файл.
TodayInfo
не заполняет остальную часть таблицы.