Question

表格未涵盖所有div，但我给出的宽度为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。

该表未涵盖我的所有div元素。在下面的截图中你看到了。 http://i59.tinypic.com/24njw2e.png 我给你你的CSS，HTML。我无法解决它

Answer 1

您的表格未扩展到100％宽度的原因是因为您的div设置为表格行，但您没有表格容器。将display:table和width:100%添加到.t2将解决此问题。 jsfiddle

我有一个由div问题创建的宽度表

1 个答案: