Почему не соединяются ячейки таблицы?

Рейтинг: 0Ответов: 1Опубликовано: 15.10.2014

Таблица из DIV, почему не колапсятся ячейки?

https://trello-attachments.s3.amazonaws.com/54365df1bca65de639901df2/1133x374/6f158eb25e1a9c159b6ed36b5bf9dda6/Untitled-1.png

.divTable {
    display: table;
    width: 1100px;
    margin: auto;
    text-align: center;
    border-collapse: collapse;
    clear: both;    
}

.divHeading {
    display: table-row;
    width: auto;
    margin: auto;
    background: -o-linear-gradient(bottom, #112431 5%, #02080e 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2d2d2d), color-stop(1, #081323));
    background: -moz-linear-gradient(center top, #281907 5%, #041d29 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2d2d2d", endColorstr="#113556");
    background: -o-linear-gradient(top, #2d2d2d, 113556);
    background-color: #2d2d2d;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    border-collapse: collapse;    
}

.divRow {
    display: table-row;
    border-collapse: collapse;     
}

.divCell1 {
    display: table-cell;
    border: 1px solid #808080;
    float: left;
    width: 35px;
    border-collapse: collapse;      
}

Ответы

▲ 1Принят

Всё-таки проблема из-за float:left у класса ячейки, вот примеры:

  1. Пример без float: left.
  2. Пример с float: left.

Если внутри блока получается каша без float:left, то можно:

  1. Либо добавить внутри блока ячейки ещё один див с float:left.
  2. Либо пересмотреть содержимое ячейки, всегда есть варианты сделать по-другому.