引导程序中另一个表头内的表头

kdr*_*kdr 2 html html-table twitter-bootstrap

在此输入图像描述

我正在尝试将表头插入另一个表头。上面是它的样子。我希望“更新”和“删除”选项卡应用行跨度。我几乎得到了我想要的,但在 Update col 之前,表格边框没有正确关闭。请在那里纠正我。

<table class="datatable table-striped table-bordered"> 
        <thead>
            <tr>
                <th rowspan="2">ID</th>
                <th rowspan="2">Name of the Liquidated Society</th>
                <th rowspan="2">Jurisdiction of the Society</th>
                <th rowspan="2">Liquidation Order No & Date</th>
                <th rowspan="2">Name & Designation of Liquidator</th>
                <th colspan="6" class="text-center">In the Liquidated Society</th>
                <th rowspan="2">Update</th>
                <th rowspan="2">Delete</th>
                </tr>
                <tr>
                <th>Govt Share</th>
                <th>Govt Loan</th>
                <th>Assets to be recovered</th>
                <th>Liability to be discharged </th>
                <th>Cancellation Order Number and Date </th>
                <th> Surplus amount remitted to CDF</th>
                </tr>


        </thead>

    </table>
Run Code Online (Sandbox Code Playgroud)

我想要从标题开始govt shareSurplus amount remitted to CDF标题下In the Liquidated Society.

Ank*_*kit 7

在这里你将如何做到这一点

<table class="datatable table-striped table-bordered"> 
    <thead>
        <tr>

            <th>ID</th>
            <th>Name of the Liquidated Society</th>
            <th>Jurisdiction of the Society</th>
            <th>Liquidation Order No & Date</th>
            <th>Name & Designation of Liquidator</th>
            <th colspan="6">In the Liquidated Society</th>

            <!-- here you have inserted the row, which is wrong -->

            <th>Update</th>
            <th>Delete</th>
        </tr>

         <!-- created a new row -->

         <tr>
          <!-- buffer of five columns to reach your desired column -->
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>

           <!-- add columns below -->   

              <th>Govt Share</th>
              <th>Govt Loan</th>
              <th>Assets to be recovered</th>
              <th>Liability to be discharged </th>
              <th>Cancellation Order Number and Date </th>
              <th> Surplus amount remitted to CDF</th>

             <!-- add buffer of 2 columns -->
               <th clospan="2"></th>
            </tr>
    </thead>

</table>
Run Code Online (Sandbox Code Playgroud)

你做错的是,你已经开始了一个new row里面row还有两个columns要显示的。首先完成上面的行,然后开始一个新行,提供 的缓冲区5 columns以达到所需的列,即In the Liquidated Society,然后再次提供 的缓冲区2 columns

您可以使用<th colspan="5">而不是five <th>像我的答案中那样使用标签。

编辑:

这就是你将实现它的方式

<table border="1" class="datatable table-striped table-bordered"> 
    <thead>
        <tr>

            <th rowspan="2">ID</th>
            <th rowspan="2"> Name of the Liquidated Society</th>
            <th rowspan="2">Jurisdiction of the Society</th>
            <th rowspan="2">Liquidation Order No & Date</th>
            <th rowspan="2">Name & Designation of Liquidator</th>
            <th colspan="6">In the Liquidated Society</th>


            <th rowspan="2">Update</th>
            <th rowspan="2">Delete</th>
        </tr>
         <tr>


              <th>Govt Share</th>
              <th>Govt Loan</th>
              <th>Assets to be recovered</th>
              <th>Liability to be discharged </th>
              <th>Cancellation Order Number and Date </th>
              <th> Surplus amount remitted to CDF</th>

            </tr>
    </thead>

</table>
Run Code Online (Sandbox Code Playgroud)

它看起来像这样

在此输入图像描述