如何合併兩行HTML表格？

我已經在谷歌搜索，但我沒有找到我的問題的任何解決方案。任何人都可以告訴我如何合併Group和GPA/CGPA, Out of行？如何合併兩行HTML表格？

對於我的代碼更好的觀點看：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>

來源

2016-12-07 Chonchol Mahmud

爲什麼就是不刪除的權利邊界，所以它看起來像合併？ :) – Troyer

那麼，這個合併是什麼意思？你想讓他們都在同一列嗎？ –

你能告訴我我該怎麼做？ –

我認爲你需要從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

來源

2016-12-07 10:34:03 Pete

是的！這是我正在尋找的：） –

如何合併兩行HTML表格？

回答

相關問題