CSS-стиль вложенных divs

Я хочу создать таблицу, используя div. Я вложил divs таким образом:CSS-стиль вложенных divs

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

Я изменяю ширину каждого div и не все изменяется, как ожидалось.

Изменение ширины таблицы div ведет себя отлично.

Ширина стола устанавливается на 70%:

enter image description here

Ширина стола установлен на 80%: enter image description here

Изменение ширины строки DIV ничего не делает.

ширина строки устанавливается на 70%: ширина enter image description here

Ряд установлен на 100%:

enter image description here

Изменение ширины ячейки DIV ведет себя совершенно неожиданным.

Ширин ячейки устанавливается на 30%: enter image description here

ширину ячейки, установленной на 20%: enter image description here

ширину ячейки, установленной на 7%: enter image description here

Я попытался в том числе положения: относительное, ничего не изменил.

Соответствующий код КСС:

.table{ 


} 

.heading{ 
    display: table-row; 

} 

.row{ 
    display: table-row; 

} 

.cell{ 

    display: table-cell; 
    border: solid; 
    border-width: thin; 
    padding-left: 5px; 

}

я изменить ширину каждого класса с помощью инструментов Dev Фирефокса.

Можете ли вы помочь мне понять основную логику?

источник

2015-02-17 balboa

«Я хочу, чтобы сделать таблицу с помощью дивы.» Зачем? –

Я с вами согласен,

для этой цели, но я хочу изучить принципы стилизации CSS, так что это только для образовательных целей. – balboa

Использование неправильного элемента и попытка исправить его с помощью CSS - не лучший способ научиться делать что-то. Используйте правый элемент и делайте это. – cimmanon

ответ

Вашего класс таблица нуждается CSS из:

display:table;

Дополнительной информации:

Таблица Ширина: не Изменение ширины таблицы сделает всю таблицу, независимо от размера указать, если содержание в пределах больше, чем вы его установили. Ячейки будут автоматически изменяться в соответствии с шириной.

Ширина строки: Ничего не делает. Вы не должны устанавливать ширину в строках, потому что они всегда занимают 100% ширины таблицы.

Ширина ячейки: Они должны всегда составлять до 100%, чтобы работать предсказуемо. Например, если у вас есть четыре ячейки в строке, вы можете установить их на 25% ширины. Установка их на 15% ширины не имеет смысла, потому что 15 * 4 = 60 ..., что оставляет 40% неучтенных.

Вы можете, однако, установить ширину ячейки SINGLE до 15%, а затем не устанавливать ширину для остальных ячеек. В этот момент тот, который вы установили, всегда будет 15%, а остальное просто займет оставшееся пространство. Как это: http://jsfiddle.net/4g2Lavmy/4/

источник

2015-02-17 13:59:35 kthornbloom

Я добавил его, но это не решило проблему. Все ведет себя так же, как раньше .... – balboa

Прекрасно работает для меня: http://jsfiddle.net/4g2Lavmy/ Это то, чего вы ожидали? – kthornbloom

Благодарим за помощь. Но я боюсь, что я не сделал свой вопрос достаточно ясным. Почему изменение свойства width в классе .row ничего не меняет? И почему изменение свойства width в классе .cell делает «непредсказуемые» изменения в таблице? То, что я хочу, наконец, выполнить, состоит в том, что один столбец занимает, например, 15% таблицы ... (Но я также хочу понять основную логику, на данный момент, почему все так происходит) – balboa

Добавить имя класса «ячейки» для всех Див-х, которые внутри div.table и использовать CSS, как это:

div.cell{width:30%;}

источник

2015-02-17 15:55:01 rJ7

Смежные вопросы