在单个td元素的右侧放置两个不同行中的多个td元素

Question

我想在表格的左侧放置一个td元素并使其跨越多行。在该td元素的右侧，我想在原始td元素跨度的每一行中对齐多个td元素。但是，由于我吮吸HTML/CSS，我最近的尝试看起来像这样。

我想对于Territory标签和输入文本框坐在Effective on this date标签/输入以下。 （用我的艺术/油漆人才突出显示的区域，我想领土的东西去）

HTML /剃刀

<table class="boxMe"> 
     <tr> 
      <td id="zipBox"> 
       @Html.Raw("Zip Code") 
       @Html.TextAreaFor(model => model.searchZip, new { style = "width: 300px;", placeholder = "Enter up to 35 comma separated zip codes" })      
      </td> 
      <td id="dateBox"> 
       @Html.LabelFor(model => model.searchDate) 
       @Html.TextBoxFor(model => model.searchDate, new { style="width: 80px;"})      
      </td> 
      <td id="stateBox"> 
       @Html.LabelFor(model => model.searchState) 
       @Html.DropDownListFor(model => model.searchState, Model.StateCodes, " ") 
       <button type="submit" id="SearchButton">Search</button>      
      </td> 
     </tr> 
     <tr> 
      <td id="terrSearch"> 
       @Html.LabelFor(model => model.searchTerritory) 
       @Html.TextBoxFor(model => model.searchTerritory, new { style = "width: 30px;padding-left:10px;", maxLength = 3 }) 
      </td> 
     </tr> 
    </table 

CSS

#zipBox { 
    float: left; 
    padding-left: 20px; 
    padding-right: 10px; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    vertical-align: top; 
    row-span: 2; 
    border:none; 
} 
#dateBox { 
    float: left; 
    padding-right: 10px; 
    padding-top: 20px; 
    border:none; 
} 
#stateBox { 
    float: left; 
    padding-right: 20px; 
    padding-top: 20px; 
    border:none; 
} 
#terrSearch { 
    border:none; 
} 
.boxMe 
{ 
    float: left; 
    border: 1px solid Silver; 
    padding: 3px; 
} 

Answer 1

我知道它不直接回答你的问题，但你真的不应该使用表格来定位元素。表格应该用于表格数据表示。可能应该在这里使用Divs。 下面是如何实现什么，我想你想使用的div

CSS

.container{ 
    width: 660px; 
} 

.container div { 
    float: left; 
    width: 200px; 
} 

HTML的例子

<div class="c1">zip code 
     <textarea>12345</textarea> 
    </div> 

    <div class="c2"> 
     <div>Effective on this date: 
     <input type="text" /> 
    </div> 
    <div>Territory: 
     <input type="text" /> 
    </div> 
</div> 
<div class="c3"> 
    State: 
    <select> 
     <option value="IL">IL</option> 
     <option value="WA">WA</option> 
     <option value="MI">MI</option> 
    </select> 
</div> 
    </div 

>

http://jsfiddle.net/BeGBa/

Answer 2

这是很基本的。看：

<table class="boxMe"> 
    <tr> 
     <td rowspan="2"> 
      @Html.Raw("Zip Code") 
      @Html.TextAreaFor(model => model.searchZip, new { style = "width: 300px;", placeholder = "Enter up to 35 comma separated zip codes" })      
     </td> 
     <td> 
      @Html.LabelFor(model => model.searchDate) 
      @Html.TextBoxFor(model => model.searchDate, new { style="width: 80px;"})      
     </td> 
     <td> 
      @Html.LabelFor(model => model.searchState) 
      @Html.DropDownListFor(model => model.searchState, Model.StateCodes, " ") 
     </td> 
    </tr> 
    <tr> 
     <td> 
      @Html.LabelFor(model => model.searchTerritory) 
      @Html.TextBoxFor(model => model.searchTerritory, new { style = "width: 30px;padding-left:10px;", maxLength = 3 }) 
     </td> 
     <td> 
      <button type="submit" id="SearchButton">Search</button> 
     </td> 
    </tr> 
</table> 

请参阅？简单。现在表格格式正确，每个行和列上的单元格总数相同，并且格式正确。没有CSS需要的表。如果你愿意，你可以为这些字段添加CSS，但这个HTML是你所需要的。

Answer 3

以为我” d张贴最后的结果LT，因为它比提供的答案稍有不同，但使用相同的概念：

HTML /剃刀

<div id="searchBox" class="boxMe"> 
     <div id="zipBox"> 
      @Html.Raw("Zip Code") 
      @Html.TextAreaFor(model => model.searchZip, new { style = "width: 300px;", placeholder = "Enter up to 35 comma separated zip codes" }) 
     </div> 
     <div id="dateBox"> 
      @Html.LabelFor(model => model.searchDate) 
      @Html.TextBoxFor(model => model.searchDate, new { style="width: 80px;"}) 
      <div id="terrBox"> 
       @Html.LabelFor(model => model.searchTerritory) 
       @Html.TextBoxFor(model => model.searchTerritory, new { style = "width: 30px;padding-left:10px;", maxLength = 3 })     
      </div> 
     </div> 
     <div id="stateBox"> 
      @Html.LabelFor(model => model.searchState) 
      @Html.DropDownListFor(model => model.searchState, Model.StateCodes, " ") 
      <button type="submit" id="SearchButton">Search</button> 
     </div> 
    </div> 
    <div style="clear: both;"></div> 

CSS

#zipBox { 
     float: left; 
     padding-left: 20px; 
     padding-right: 10px; 
     padding-top: 20px; 
     padding-bottom: 20px; 
     vertical-align: top; 
     border:none; 
    } 
    #dateBox { 
     float: left; 
     padding-right: 10px; 
     padding-top: 20px; 
     border:none; 
    } 
    #stateBox { 
     float: left; 
     padding-right: 20px; 
     padding-top: 20px; 
     border:none; 
    } 
    #terrBox { 
     padding-top: 20px; 
     padding-left: 110px; 
    } 
    .boxMe 
    { 
     float: left; 
     border: 1px solid Silver; 
     padding: 3px; 
    }