Questions I have a table which created by div problems with width
ATIKON Asked

Table doesn't cover all div, but i give a width in 100%

$("#astana").click(function(){
			$(".t2").toggle(500);
		});
/*---tables---*/
.wrapper {
  margin: 0 auto;
  max-width: 800px;
}

.table {
  margin: 0 0 40px 0;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: table;
}

.row {
  display: table-row;
  background: #f6f6f6;
}
.row:nth-of-type(odd) {
  background: #e9e9e9;
}
.row.header {
  font-weight: 900;
  color: #ffffff;
  background: #ea6153;
}
.row.green {
  background: #27ae60;
}
.row.blue {
  background: #2980b9;
}


.cell {
  padding: 6px 12px;
  display: table-cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div class="table">
<div class="row header">
<div class="cell" id="astana">Астана</div>
</div>
<div class="t2">
<div class="row header blue">
<div class="cell">№</div>
<div class="cell">Ресторан</div>
<div class="cell">Адрес</div>
<div class="cell">Тел. доставки</div>
<div class="cell">Часы доставки:</div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell">ТРЦ «КЕРУЕН»</div>
<div class="cell">улица Достык, 9</div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell">2</div>
<div class="cell">ХАН ШАТЫР</div>
<div class="cell">пр. Туран, 37</div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell">3</div>
<div class="cell">КОНГРЕСС-ХОЛЛ</div>
<div class="cell">Бейбитшилик 9<br>
Правый берег</div>
<div class="cell">+7(717)273-81-37<br>
+7(777)148-26-34</div>
<div class="cell">10:00-23:00<br>
без выходных</div>
</div>
<div class="row">
<div class="cell">4</div>
<div class="cell">«MEGA ASTANA»</div>
<div class="cell">Коргальджинское шоссе, 1<br>
Левый берег</div>
<div class="cell">+7(717)279-14-69<br>
+7(705)308-54-31</div>
<div class="cell">10:00-23:00<br>
без выходных</div>
</div>
<div class="row">
<div class="cell">5</div>
<div class="cell">РЕСПУБЛИКА</div>
<div class="cell">пр. Республики 8</div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell">6</div>
<div class="cell">УНИВЕРСИТЕТ</div>
<div class="cell">ул. Пушкина уг.ул. Мирзояна</div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell">7</div>
<div class="cell">Парк Арай</div>
<div class="cell">Сарайшык</div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
</div>
</div>

CSS of table.

The table doesn't cover all of my div element. In the following screenshot u see that. http://i59.tinypic.com/24njw2e.png I give u css, html. I can't solve it


1 Answers :
Aminesrine answered

The reason that your table is not expanding to 100% width is because your divs are set to table-row, but you do not have a table container. Adding display:table and width:100% to .t2 will fix this. jsfiddle

ATIKON replied
many thanks man, you save a lot of my time :) I can't give + rep, but i give u my respect :);