如何在表td中设置三列以下行列？

Question

我正在使用 HTML 表格创建标记表设计。 我有这个设计

以及我创造的东西

正如您在第一行的第三列中看到的那样，“安全”、“通过”和“总计”有三列，我已经为这三列创建了一个表格，但没有得到准确的结果，并且与下面的行列的宽度和边框接触出现问题。 我的 HTML 代码

   <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>
 

我做错了什么吗？ 安全，通过，总列应根据下面的列进行拉伸并适合宽度，

Answer 1

您还可以使用 rowspan 属性来合并 HTML 中的某些行。 rowspan 属性指定单元格应跨越多少行。例如，如果你想合并第一列的前两行，你可以这样写：

<table>
  <tr>
   <td rowspan="2">Merged cell</td>
   <td>Cell 2</td>
   <td>Cell 3</td>
   <td>Cell 4</td>
  </tr>
  <tr>
   <td>Cell 6</td>
   <td>Cell 7</td>
   <td>Cell 8</td>
  </tr>
  <tr>
    <td>Cell 9</td>
    <td>Cell 10</td>
    <td>Cell 11</td>
    <td>Cell 12</td>
  </tr>
</table>

结果将类似于此屏幕截图：

此外，您可以组合 colspan 和 rowspan 属性来合并两个方向的单元格。

Answer 2

您可以合并单元格并使用

rowspan

和

colspan

实现相同的效果，而不是使用嵌套表格

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>
    <tbody>
        <tr>
            <td rowspan="2">Sr. No.</td>
            <td rowspan="2">Paper Nomenclature</td>
            <td colspan="3" style="text-align:center">MARKS</td>
        </tr>
        <tr>
            <td>Secured</td>
            <td>Pass</td>
            <td>Total</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>