HTMLテーブルの2つの行をマージするにはどうすればよいですか？

Googleで検索しましたが、私の問題の解決策が見つかりません。GroupとGPA/CGPA, Out of行をマージする方法を教えてください。私が欲しいものBOOTPLY.HTMLテーブルの2つの行をマージするにはどうすればよいですか？

：私のコードを参照のより見やすくするために

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

だから、このマージはどういう意味ですか？それらを同じ列の下に置いておきたいですか？ –

どうすればいいのですか？ –

私はあなただけtheaderに、tbodyからあなたの見出しを移動して、私達はちょうど私が移動したものにように、コードで（コメントを動かし見出しを置き換えるために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テーブルの2つの行をマージするにはどうすればよいですか？

答えて

関連する問題