Question

我在谷歌搜索但我找不到任何我的问题的解决方案。有人能告诉我如何合并Group和GPA/CGPA, Out of行吗？

为了更好地查看我的代码，请参阅： BOOTPLY.

我想要的是什么：

SEE http://image.prntscr.com/image/98b3662a7ed04b869aa9534946fa1f1b.png

到目前为止，这是我的代码：

<table class="table table-bordered table-hover table-condensed table-responsive">
  <thead>
    <tr>
      <th class="tg-yw4l" rowspan="2">Level</th>
      <th class="tg-yw4l" rowspan="2">Name of Examination</th>
      <th class="tg-yw4l" rowspan="2">Year of Study</th>
      <th class="tg-yw4l" rowspan="2">Group /Subject</th>
      <th class="tg-yw4l" rowspan="2">Division/
        Class/Grade </th>
      <th class="tg-yw4l" colspan="2">Grade</th>
      <th class="tg-yw4l" rowspan="2">Board /University</th>
      <th class="tg-yw4l" rowspan="2">Year of Passing
        [yyyy]</th>
      <th class="tg-yw4l" rowspan="2">Result Published by Controller of Exam [dd/mm/yyyy]</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        SSC/Equivalent
      </td>
      <td>
        <select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="SSC">SSC</option>
          <option value="Dakhil">Dakhil</option>
          <option value="O Level">O Level</option>
        </select>
      </td>
      <td>

      </td>
      <td>
        <select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="Science">Science</option>
          <option value="Arts">Arts</option>
          <option value="Commerce">Commerce</option>
          <option value="Business Studies">Business Studies</option>
          <option value="Humanities">Humanities</option>
          <option value="Others">Others</option>
        </select>
      </td>
      <td>
        <select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="First">First</option>
          <option value="Second">Second</option>
          <option value="Third">Third</option>
          <option value="Grade">Grade</option>
        </select>
      </td>
      <th>GPA/CGPA</th>
      <th>Out of</th>
      <td>
        <input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
      </td>
      <td>
        <input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
      </td>
      <td>
        <input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
      </td>
    </tr>
    <tr>
      <td>
        HSC/Equivalent
      </td>
      <td>
        <select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="SSC">SSC</option>
          <option value="Dakhil">Dakhil</option>
          <option value="O Level">O Level</option>
        </select>
      </td>
      <td>

      </td>
      <td>
        <select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="Science">Science</option>
          <option value="Arts">Arts</option>
          <option value="Commerce">Commerce</option>
          <option value="Business Studies">Business Studies</option>
          <option value="Humanities">Humanities</option>
          <option value="Others">Others</option>
        </select>
      </td>
      <td>
        <select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="First">First</option>
          <option value="Second">Second</option>
          <option value="Third">Third</option>
          <option value="Grade">Grade</option>
        </select>
      </td>
      <td>
        [CONTENT]
      </td>
      <td></td>
      <td>
        <input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
      </td>
      <td>
        <input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
      </td>
      <td>
        <input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
      </td>
    </tr>
    <tr>
      <td>
        Graduation
      </td>
      <td>
        <select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="SSC">SSC</option>
          <option value="Dakhil">Dakhil</option>
          <option value="O Level">O Level</option>
        </select>
      </td>
      <td>
        <select name="Gradnoyear" id="Gradnoyear" class="breadcrumbcombo1" tabindex="38" style="visibility: visible;">
          <option value="-1" selected="selected">--Select--</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </td>
      <td>
        <select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="Science">Science</option>
          <option value="Arts">Arts</option>
          <option value="Commerce">Commerce</option>
          <option value="Business Studies">Business Studies</option>
          <option value="Humanities">Humanities</option>
          <option value="Others">Others</option>
        </select>
      </td>
      <td>
        <select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="First">First</option>
          <option value="Second">Second</option>
          <option value="Third">Third</option>
          <option value="Grade">Grade</option>
        </select>
      </td>
      <td>
        [CONTENT]
      </td>
      <td></td>
      <td>
        <input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
      </td>
      <td>
        <input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
      </td>
      <td>
        <input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
      </td>
    </tr>
    <tr>
      <td>
        Post Graduation
      </td>
      <td>
        <select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="SSC">SSC</option>
          <option value="Dakhil">Dakhil</option>
          <option value="O Level">O Level</option>
        </select>
      </td>
      <td>

      </td>

      <td>
        <select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="Science">Science</option>
          <option value="Arts">Arts</option>
          <option value="Commerce">Commerce</option>
          <option value="Business Studies">Business Studies</option>
          <option value="Humanities">Humanities</option>
          <option value="Others">Others</option>
        </select>
      </td>
      <td>
        <select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="First">First</option>
          <option value="Second">Second</option>
          <option value="Third">Third</option>
          <option value="Grade">Grade</option>
        </select>
      </td>
      <td>
        [CONTENT]
      </td>
      <td></td>
      <td>
        <input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
      </td>
      <td>
        <input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
      </td>
      <td>
        <input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
      </td>
    </tr>
  </tbody>
</table>

Answer 1

我认为您只需将标题从tbody移至theader，然后在tbody添加几个常规列以替换我们刚刚移动的标题（关于我移动和添加的内容的代码注释：

<table class="table table-bordered table-hover table-condensed table-responsive">
  <thead>
    <tr>
      <th class="tg-yw4l" rowspan="2">Level</th>
      <th class="tg-yw4l" rowspan="2">Name of Examination</th>
      <th class="tg-yw4l" rowspan="2">Year of Study</th>
      <th class="tg-yw4l" rowspan="2">Group /Subject</th>
      <th class="tg-yw4l" rowspan="2">Division/ Class/Grade</th>
      <th class="tg-yw4l" colspan="2">Grade</th>
      <th class="tg-yw4l" rowspan="2">Board /University</th>
      <th class="tg-yw4l" rowspan="2">Year of Passing [yyyy]
      </th>
      <th class="tg-yw4l" rowspan="2">Result Published by Controller of Exam [dd/mm/yyyy]</th>
    </tr>

    <!-- put your other two headers from tbody here: -->
    <tr>
      <th>GPA/CGPA</th>
      <th>Out of</th>
    </tr>


  </thead>
  <tbody>
    <tr>
      <td>
        SSC/Equivalent
      </td>
      <td>
        <select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="SSC">SSC</option>
          <option value="Dakhil">Dakhil</option>
          <option value="O Level">O Level</option>
        </select>
      </td>
      <td>

      </td>
      <td>
        <select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="Science">Science</option>
          <option value="Arts">Arts</option>
          <option value="Commerce">Commerce</option>
          <option value="Business Studies">Business Studies</option>
          <option value="Humanities">Humanities</option>
          <option value="Others">Others</option>
        </select>
      </td>
      <td>
        <select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="First">First</option>
          <option value="Second">Second</option>
          <option value="Third">Third</option>
          <option value="Grade">Grade</option>
        </select>
      </td>


    <!-- replace those headers we have moved with a couple of normal columns: -->

      <td>
        [CONTENT]
      </td>
      <td></td>


      <td>
        <input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
      </td>
      <td>
        <input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
      </td>
      <td>
        <input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
      </td>
    </tr>
    <tr>
      <td>
        HSC/Equivalent
      </td>
      <td>
        <select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="SSC">SSC</option>
          <option value="Dakhil">Dakhil</option>
          <option value="O Level">O Level</option>
        </select>
      </td>
      <td>

      </td>
      <td>
        <select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="Science">Science</option>
          <option value="Arts">Arts</option>
          <option value="Commerce">Commerce</option>
          <option value="Business Studies">Business Studies</option>
          <option value="Humanities">Humanities</option>
          <option value="Others">Others</option>
        </select>
      </td>
      <td>
        <select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="First">First</option>
          <option value="Second">Second</option>
          <option value="Third">Third</option>
          <option value="Grade">Grade</option>
        </select>
      </td>
      <td>
        [CONTENT]
      </td>
      <td></td>
      <td>
        <input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
      </td>
      <td>
        <input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
      </td>
      <td>
        <input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
      </td>
    </tr>
    <tr>
      <td>
        Graduation
      </td>
      <td>
        <select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="SSC">SSC</option>
          <option value="Dakhil">Dakhil</option>
          <option value="O Level">O Level</option>
        </select>
      </td>
      <td>
        <select name="Gradnoyear" id="Gradnoyear" class="breadcrumbcombo1" tabindex="38" style="visibility: visible;">
          <option value="-1" selected="selected">--Select--</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </td>
      <td>
        <select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="Science">Science</option>
          <option value="Arts">Arts</option>
          <option value="Commerce">Commerce</option>
          <option value="Business Studies">Business Studies</option>
          <option value="Humanities">Humanities</option>
          <option value="Others">Others</option>
        </select>
      </td>
      <td>
        <select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="First">First</option>
          <option value="Second">Second</option>
          <option value="Third">Third</option>
          <option value="Grade">Grade</option>
        </select>
      </td>
      <td>
        [CONTENT]
      </td>
      <td></td>
      <td>
        <input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
      </td>
      <td>
        <input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
      </td>
      <td>
        <input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
      </td>
    </tr>
    <tr>
      <td>
        Post Graduation
      </td>
      <td>
        <select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="SSC">SSC</option>
          <option value="Dakhil">Dakhil</option>
          <option value="O Level">O Level</option>
        </select>
      </td>
      <td>

      </td>

      <td>
        <select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="Science">Science</option>
          <option value="Arts">Arts</option>
          <option value="Commerce">Commerce</option>
          <option value="Business Studies">Business Studies</option>
          <option value="Humanities">Humanities</option>
          <option value="Others">Others</option>
        </select>
      </td>
      <td>
        <select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
          <option value="-1">--Select--</option>
          <option value="First">First</option>
          <option value="Second">Second</option>
          <option value="Third">Third</option>
          <option value="Grade">Grade</option>
        </select>
      </td>
      <td>
        [CONTENT]
      </td>
      <td></td>
      <td>
        <input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
      </td>
      <td>
        <input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
      </td>
      <td>
        <input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
      </td>
    </tr>
  </tbody>
</table>

Updated bootply

如何合并HTML表的两行？

1 个答案: