0

tdテーブルの左側に1 つの要素を配置し、複数の行にまたがるようにしたいと考えています。その要素の右側に、元の要素がまたがる各行にtd複数の要素を配置したいと思います。ただし、私は HTML/CSS が苦手なので、最近の試みは次のようになります。tdtd

ここに画像の説明を入力

私が望むのは、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;
}
4

3 に答える 3

1

あなたの質問に直接答えないことはわかっていますが、要素を配置するためにテーブルを使用するべきではありません。テーブルは、表形式のデータ表現に使用する必要があります。ここでは、代わりに div を使用する必要があります。これは、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/

于 2013-10-07T21:29:54.913 に答える
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 だけです。

于 2013-10-07T21:15:57.200 に答える
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;
     }
于 2013-10-08T15:38:59.973 に答える