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

时间:2013-10-07 21:12:26

标签: html css html5 css3

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

enter image description here

我希望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;
}

3 个答案:

答案 0 :(得分:1)

我知道它并没有直接回答你的问题,但你真的不应该使用表格来定位元素。表应该用于表格数据表示。在这里可能应该使用Div。 以下是如何使用divs

实现我认为您想要的内容的示例

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

&GT;

http://jsfiddle.net/BeGBa/

答案 1 :(得分:0)

这是非常基本的。看:

<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就是您所需要的。

答案 2 :(得分:0)

以为我会发布最终结果,因为它与提供的答案略有不同,但使用相同的概念:

<强> 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;
     }