Проблема с таблицей CSS

Question

Проблема с таблицей CSS

0

Я - noob в CSS, и я на самом деле пытался создать структуру таблицы типа с использованием Html Div и CSS, но застрял в одной проблеме.

Проблема в том, что я поместил 4 столбца в одну строку. Последний столбец содержит текстовую область, которая может расширяться. Когда я пытаюсь расширить область текста, только последний столбец расширяется вместо целой строки.

Ниже приведена демо-версия кода:

http://codepen.io/anon/pen/oIChn

user3027865 06 май 2014, в 15:17

Источник

0

Если это табличные данные, почему бы не использовать фактическую таблицу? В противном случае вы захотите использовать атрибуты display: table- * для своих контейнерных элементов div. css-tricks.com/almanac/properties/d/display
Ian 06 май 2014, в 13:08

Теги:

html

css

2 ответа

Ещё вопросы

Если это табличные данные, почему бы не использовать фактическую таблицу? В противном случае вы захотите использовать атрибуты display: table- * для своих контейнерных элементов div. css-tricks.com/almanac/properties/d/display

SW4 · Answer 1 · 2014-05-06T10-26-00.000Z

Код не работает, потому что вы arent следуя за структурой таблицы, которая должна (всегда) быть:

table
-row
--cell
--/cell
-/row
/table

В вашем коде вы используете некоторый display:tablexx CSS, однако часто в элементах, изолированных от других аспектов структуры таблицы, которые они ожидают, рядом с ними, так как макет разбит.

Правильная структура CSS/HTML (например):

Демо-скрипт

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'></div>
        <div class='cell'></div>
        <div class='cell'></div>
    </div>
    <div class='row'>
        <div class='cell'></div>
        <div class='cell'></div>
        <div class='cell'></div>
    </div>
</div>

CSS

.table {
    display:table;
    height:100%;
}
.cell {
    display:table-cell;
    width:50px;
    height:100px;
    border:1px solid black;
}
.row {
    display:table-row;
}

Обратите внимание, что с помощью этого нет конкретных разделов thead или tbody, вы можете просто приспособить свой CSS к заголовкам стилей и т.д., Если это необходимо.

Rares Hideg · Answer 2 · 2014-05-06T12-01-00.000Z

Добавьте это в конце вашего css, должен сделать трюк

.r-tab-head{
display: table-row;
float: none;
}

.divCell {
    display: table-cell;
    float: none;
}