Search code examples
htmlhtml-tablehtml5-canvas

How to set three columns in table td with below row columns?

I am creating a marksheet design using an HTML table. I have this design enter image description here

and what I created enter image description here

As you can see in the third column of the first row secured, pass, and total there are three columns, I have created a table for these three columns but not getting exact and getting issues with width and border touch with the below row columns. My HTML code

   <table border="0" width="100" class="table4 table3" style="border-left: 3px solid #fff;border-right: 3px solid #fff;">
      <tr>
        <td style="width:60px;" class="text-center">Sr. <br> No.</td><td class="text-center" style="width:800px !important;">Paper Nomenclature</td>
        
        <td class="text-center" colspan="3" style="width:220px !important;">Marks
<table style="width: 100%;border-left: 3px solid #fff;border-right: 3px solid #fff; margin-left: -10px;border-bottom: 3px solid #fff;" class="">
  <tr>
    <td>Secured</td> <td>Pass</td> <td>Total</td>
  </tr>
</table>
        </td> 
</table>

 <tr>
        <td style="width:60px;" class="text-center">2 .</td>
        <td>
          <table border="0" style="width:100%; border: 0px !important; border-color: #fff !important;" class="table5">
            <tr>
              <td>Punjabi (Compulsory )</td>
               <td style="width:350px;">
                               <table border="1" style="width:100%;border:0px !important;margin-top: -25px; height:40px;"></table>
                            <table border="1" style="width:100%;border:0px !important;margin-top: -15px;">
                  <tr> 
                    <td> 45</td><td> 31</td><td> 45</td><td> 45</td> <td> 55</td> 
                  </tr>
                </table>
               </td>
            </tr>
          </table>
        </td>
        <td class="text-center">
          221        </td> <td class="text-center">35</td> <td class="text-center">100</td> 
      </tr>

Am I doing something wrong? Secured, pass, the total column should be stretched according to the below columns and fit to width,

Solution

  • You can merge cells and achieve the same using rowspan and colspan rather than using a nested tables

    table {
    border-collapse: collapse;
}

tbody td, tbody th {
    border: 1px dashed #595959;
    padding: 3px;
    width: 30px;
    height: 25px;
}

tbody td:first-child,
tbody th:first-child {
    border-left: none; /* Remove left border for first column */
}

tbody td:last-child,
tbody th:last-child {
    border-right: none; /* Remove right border for last column */
}
    <table style="width:100%">
    <tbody>
        <tr>
            <td rowspan="2" style="text-align:center">Sr. No.</td>
            <td rowspan="2" style="text-align:center">Paper Nomenclature</td>
            <td colspan="3" style="text-align:center">MARKS</td>
        </tr>
        <tr>
            <td style="text-align:center">Secured</td>
            <td style="text-align:center">Pass</td>
            <td style="text-align:center">Total</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>