将html表tr水平分割为两个

时间:2014-03-12 11:47:35

标签: css html5

我有2列的表,在第2列我有嵌套表。我想在两个水平块中拆分tr ...首先我把所有的tds和第二个我把确认和取消按钮

enter image description here

  <table id="ElementTable" class="customTable_01">
                 <thead>
                        <tr>
                            <th class="SC_a1">
                                @Html.DisplayName("Element")
                            </th>

                            <th class="SC_a2">
                                Marking-Scheme
                            </th>
                        </tr>
                 </thead>
                <tbody>
                    @foreach (var item in Model._Element)
                        {
                        <tr>
                            <td class="SC_a1"> @Html.DisplayFor(modelitem => item.ElementTitle) </td>

                            <td class="SC_a2">
                                <input type="button" value="Add" name="button" data-id="@item.ElementID" class="k-button k-button-icontext k-grid-Add ComponentScheme_Add" />

                                @*Nasted Table....*@
                                <table class="NastedElementTable">
                                    <thead>
                                        <tr>
                                            <th class="N_th">Mark Scheme Title</th>
                                            <th class="N_th">Available-Mark</th>
                                            <th class="N_th">Pass-Mark</th>
                                            <th class="N_th">Merit-Mark</th>
                                            <th class="N_th">Distinction-Mark</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="N_td">@Html.TextBox("Input_Title_Element", null, new { id = @item.ElementID + "_DM", @class = "ElementDistinctionMark k-grid-input k-textbox_3" })  </td>
                                            <td class="N_td">@Html.TextBox("Input_AvailableMark_Element", null, new { id = @item.ElementID + "_AM", @class = "ElementAvailableMarks k-grid-input k-textbox_4" })</td>
                                            <td class="N_td">@Html.TextBox("Input_PassMark_Element", null, new { id = @item.ElementID + "_PM", @class = "ElementPassMark k-grid-input k-textbox_4" })</td>
                                            <td class="N_td">@Html.TextBox("Input_MeritMark_Element", null, new { id = @item.ElementID + "_MM", @class = "ElementMeritMark k-grid-input k-textbox_4" })</td>
                                            <td rowspan="2" class="N_td">@Html.TextBox("Input_DistinctionMark_Element", null, new { id = @item.ElementID + "_DM", @class = "ElementDistinctionMark k-grid-input k-textbox_4" })</td>



                                        </tr>



                                    </tbody>
                                </table>

                            </td>
                        </tr>
                       }
                </tbody>
              </table>

1 个答案:

答案 0 :(得分:0)

我找到了解决方案,在我的表格中注意到有1 tr这样的技巧是在tbody中添加两个tr

 <thead>
    <tr>
        <td></td>
        ....
    </tr>
 </thead>
 <tbody>
      <tr>
         <td><td/>
         ......
      </tr>
      <tr>
         <td>
               <input type="button" value="Cancel">
         <td/>
         <td>
               <input type="button" value="Confirm">
         </td>
      </tr>