Используйте table-cell для заполнения оставшейся части div

Question

Используйте table-cell для заполнения оставшейся части div

0

Я пытаюсь создать таблицу, в которой последний столбец таблицы заполняет остальную часть таблицы. Я использую 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/

Josh Luke Blease 19 фев. 2014, в 23:58

Источник

0

Требуется весь этот код, чтобы воспроизвести проблему?
cimmanon 19 фев. 2014, в 22:30

Теги:

html

css

width

css-tables

2 ответа

Ещё вопросы

Требуется весь этот код, чтобы воспроизвести проблему?

Gary Stevens · Answer 1 · 2014-03-05T08-51-00.000Z

Есть ли конкретная причина, почему вы не используете таблицу для этого? Я знаю, что таблицы часто воспринимаются как старая школа, но у вас есть данные таблицы и сценарий, требующий табличной логики. Я думаю, что использование DIV и CSS для репликации таблиц было бы сложным и сложным для изменения/поддержания и сделать его довольно хрупким.

Другим возможным решением было бы не использовать табличную ячейку вообще и вместо этого использовать DIV с процентной шириной, поэтому они всегда заполняют общую ширину. Затем вы можете иметь контейнер внутри каждого DIV с дисплеем: таблица для вертикального центрирования содержимого.

Извините, если я что-то не понял.

Stéphane de Luca · Answer 2 · 2014-02-19T19-51-00.000Z

Просто добавьте это правило в свой стиль:

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

Btw, вы не обязаны иметь класс для каждого уровня тега. Вы можете использовать правила узла узла CSS, чтобы выбрать определенный тег и применить стиль. Если вы поедете на это, вы получите более простой (и более легкий) HTML файл.

Добавление классов практически для каждого тега - это то, что сейчас делают все «крутые» дети.
Это не решило проблему, если вы посмотрите на мой пример на большом экране, вы увидите, что средняя линия не продолжается по всему экрану. Я полагаю, это потому, что класс TodayInfo не заполняет остальную часть таблицы.