html - Bootstrap 中另一个表头内的表头

Question

我正在尝试将表头插入到另一个表头中。以上是它的样子。我希望“更新和删除”选项卡应用行跨度。我几乎得到了我想要的，但在更新 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>

我希望标题从 govt share 开始到 In the Liquidated Society 标题下的 Surplus amount resemed to CDF。

Answer 1

在这里你将如何做

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

你做错的是，你启动了一个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>

看起来像这样