Я использую div, которые ведут себя как таблица для медиа-запросов / адаптивного дизайна.Ячейки коричневые, а нижележащая таблица оранжевая.Попытка заставить коричневые ячейки расширяться горизонтально, чтобы соответствовать полной ширине оранжевого стола.Как это, оранжевый шире.Спасибо за любую помощь.
<style type=text/css>
.formwidth{background-color: orange;}
.Cell, .Cell_fullwidth {
text-align: left;
display: table-cell;
border: none;
border-width: thin;
padding-left: 0px;
padding-right: 0px;
padding-top: 5px;
padding-bottom: 5px;
vertical-align: top;}
.formCell{height:29px; background-color: brown;}
@media only screen and (max-width: 1550px) {
.Cell, .Cell_makewide {float: left;}
.Cell_fullwidth {float: left;}
.Cell_screenwidth {float: left;}
.Cell { width:47%; float: left; }
.Cell_makewide {float: left;}
.Cell_screenwidth {width: 100%; float: left;}
.Cell_fullwidth {width: 100%; float: left;}
.mainTable{width:708px;}
}
@media only screen and (max-width: 745px) {
.mainTable{width: 85%;}
.Cell {width:95%; float: left;}
}
</style>
<html><body>
<div class="Table mainTable">
<div class="Row">
<div class="Cell_fullwidth formwidth">
<div class="Table">
<div class=Row>
<div class="Cell formCell">Your name:</div>
<div class="Cell formCell">
<input class=boxwidth type=text name="your_name"></div>
</div>
<div class=Row>
<div class="Cell formCell">Email:</div>
<div class="Cell formCell">
<input class=boxwidth type=text name="email_address"></div>
</div>
<div class=Row>
<div class="Cell formCell">Phone:</div>
<div class="Cell formCell">
<input class=boxwidth type=text name="home_phone"></div>
</div>
<div class=Row>
<div class="Cell formCell">When visiting:</div>
<div class="Cell formCell">
<input class=boxwidth type=text name="Visit_Date"></div>
</div>
<div class=Row>
<div class="Cell formCell">When moving:</div>
<div class="Cell formCell">
<input class=boxwidth type=text name="Moving_Date"></div>
</div>
<div class=Row>
<div class="Cell formCell">I describe myself as:</div>
<div class="Cell formCell">
<select class=boxwidth name="Number_Moving">
<option>Select Category</option>
<option>Just Browsing</option>
<option>Consideringe</option>
<option>Ready to Go</option>
<option>an Investor</option>
<option>Already Bought</option>
</select>
</div>
</div>
<div class=Row>
<div class="Cell formCell">Area of Tucson:</div>
<div class="Cell formCell">
<select class=boxwidth name="Where_in_Tucson">
<option>Select Area</option>
<option>Tucson</option>
<option>Oro Valley</option>
<option>Marana</option>
<option>Catalina Foothills</option>
<option>University</option>
<option>NorthEast</option>
<option>NorthWest</option>
<option>SouthEast</option>
<option>SouthWest</option>
<option>Downtown</option>
<option>East</option>
<option>West</option>
<option>Central</option>
<option>Other</option>
</select>
</div>
</div> <!--end row --!>
<div class=Row>
<div class="Cell formCell">I have a home to sell:</div>
<div class="Cell formCell">
<input type=radio name=Home_to_sell value=yes>yes
<input type=radio name=home_to_sell value=no>no</div>
</div>
</div>
</div> <!--end table --!>
</body></html>
Этот CSS может помочь, но, похоже, не имеет ожидаемого эффекта:
.Table {display: table;граница: нет;граница: сплошная;ширина бордюра: тонкая;границы коллапса: крах;интервал границы: 0;}
.Row {display: table-row;}
Спасибо