Table header 在另一个 table 里面 header 在 bootstrap

Question

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

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

我想在标题 In the Liquidated Society.

下从 govt share 开始到 Surplus amount remitted 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>

您做错的是，您在 row 中启动了 new 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>

看起来像这样

Table header 在另一个 table 里面 header 在 bootstrap

Table header inside another table header in bootstrap

html

html-table

twitter-bootstrap