Question

我使用的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;边界：无；边框：实心；边框宽度：细； border-collapse：collapse; border-spacing：0;}

.Row {display：table-row;}

谢谢

如何扩展单元格以匹配表的整个宽度

0 个答案: