Как предотвратить расширение строки таблицы CSS до родительской высоты

Question

Как предотвратить расширение строки таблицы CSS до родительской высоты

0

Я пытаюсь создать таблицу с display:table CSS display:table display:table-row и display:table-cell. Проблема в том, что я не могу установить высоту строк таблицы. Они расширены до родительской высоты. В моем коде я поставил .trow высоту до 30px, но они разлагаются на родительскую высоту 400px. !important и встроенный стиль тоже не работает. Как я могу это решить?

PS Так жаль моего бедного английского.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .table{
            display: table;
            width: 500px;
            border: 1px solid #000000;
            height: 400px;
        }
        .trow{
            height: 30px;
            display: table-row;
            width: 100%;
            background-color: #444444;
        }
        .tcell{
            display: table-cell;
            width: 20%;
            color: #ffffff;
        }
    </style>
</head>
<body>
<div class="table">
    <div class="trow" style="height: 30px">
        <div class="tcell">I'm table cell</div>
    </div>
</div>
</body>
</html>

user2522545 19 окт. 2013, в 00:15

Источник

0

чего ты хочешь добиться?
Michał Rybak 18 окт. 2013, в 21:45

Теги:

html

css

2 ответа

0

это поведение по умолчанию для table-cell. если вы хотите, чтобы ячейка не заполнила пробел, вы должны предоставить что-то еще, что будет.

я просто добавил еще одну строку:

<div class="trow tfill">
    <div class="tcell"></div>
</div>

который подталкивает вашу строку к вершине таблицы

.tfill{
    height: 100%;
    background-color: #fff; 
}

http://jsfiddle.net/vdy4Y/

Tschitsch 18 окт. 2013, в 19:45

Ещё вопросы

Michał Rybak · Accepted Answer · 2013-10-18T20-41-00.000Z

Почему вы используете display: table, если вам нужно поведение без таблицы? Поведение таблицы по умолчанию (если указано высота таблицы) - это расширение высоты строки до заполнения всей высоты стола. Это именно то, что вы получаете.

Просто удалите все свойства display и все будет в порядке.

демо здесь

Благодарю. Теперь я .tcell все свойства отображения и устанавливаю .tcell display: .tcell в inline-block . Это работает.