Bootstrap中的嵌套表沒有正確排列

我在bootstrap中有一系列嵌套表，但每個類別中的子表沒有正確排列。代碼太長，張貼在這裏，但我有它在此琴：https://jsfiddle.net/c310uxxf/1 Bootstrap中的嵌套表沒有正確排列

下面是代碼片段：

<table class="table table-striped table-hover"> 
    <thead> 
     <tr> 
      <th>Loan Status</th> 
      <th>Number of Loans</th> 
      <th>Total Loan Amount</th> 
     </tr> 
    </thead> 

    <tr class="accordion-toggle" data-toggle="collapse" data-target="#Registered"> 
     <td><i class="fa fa-plus"></i> Registered</td> 
     <td>5</td> 
     <td>$800,000</td> 
    </tr> 
    <tr> 
     <td colspan='2' class="accordion-body collapse" id="Registered"> 
      <table id="example" class="table table-striped responsive-utilities jambo_table"> 
       <thead> 
        <tr class="headings"> 
         <th> 
          <input type="checkbox" class="tableflat"> 
         </th> 
         <th>Invoice </th> 
         <th>Invoice Date </th> 
         <th>Order </th> 
         <th>Bill to Name </th> 
         <th>Status </th> 
         <th>Amount </th> 
         <th class=" no-link last"> 
          <span class="nobr">Action</span> 
         </th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr class="even pointer"> 
         <td class="a-center "> 
          <input type="checkbox" class="tableflat"> 
         </td> 
         <td class=" ">121000040</td> 
         <td class=" ">May 23, 2014 11:47:56 PM </td> 
         <td class=" "> 
          121000210 <i class="success fa fa-long-arrow-up"></i> 
         </td> 
         <td class=" ">John Blank L</td> 
         <td class=" ">Paid</td> 
         <td class="a-right a-right ">$7.45</td> 
         <td class=" last"> 
          <a href="#">View</a> 
         </td> 
        </tr> 
        <tr class="odd pointer"> 
         <td class="a-center "> 
          <input type="checkbox" class="tableflat"> 
         </td> 
         <td class=" ">121000037</td> 
         <td class=" ">May 24, 2014 10:52:44 PM</td> 
         <td class=" ">121000204</td> 
         <td class=" ">Mike Smith</td> 
         <td class=" ">Paid</td> 
         <td class="a-right a-right ">$333.21</td> 
         <td class=" last"> 
          <a href="#">View</a> 
         </td> 
        </tr>

它實際上看起來在搗鼓好一點，然後用所有的主題和習慣，但它仍然沒有排列正確。我試圖獲得子表（註冊，提交，&鎖定下的子表）跨越它們所嵌套的表的全部寬度。它可能很簡單，但我無法弄清楚。

任何幫助將是偉大的。

來源

2016-02-20 user61398

在你的小提琴html..line 311，請確保你有正確的結構''和'

''正確 –

回答

正如你所提到的你想要的子表（在註冊，提交，&鎖定下的子表）跨越它們所嵌套的表的全部寬度。

問題是，子表中的TR的一個TD的定義，但其兄弟TR有三列，以便爲有該子表的TR則必須結合三列中的一列，即合併單元格=「3」

請點擊JS Fiddle link查看正確的寬度。

<body class="nav-md"> 
<div class="container body"> 

    <div class="main_container"> 

     <div class="right_col" role="main"> 
      <div class="col-lg-12 col-sm-12 col-xs-12"> 
       <div class="x_panel"> 


        <table class="table table-striped table-hover"> 
         <thead> 
          <tr> 
           <th>Loan Status</th> 
           <th>Number of Loans</th> 
           <th>Total Loan Amount</th> 
          </tr> 
         </thead> 

         <tr class="accordion-toggle" data-toggle="collapse" data-target="#Registered"> 
          <td><i class="fa fa-plus"></i> Registered</td> 
          <td>5</td> 
          <td>$800,000</td> 
         </tr> 
         <tr> 
          <td colspan='2' class="accordion-body collapse" id="Registered"> 
           <table id="example" class="table table-striped responsive-utilities jambo_table"> 
            <thead> 
             <tr class="headings"> 
              <th> 
               <input type="checkbox" class="tableflat"> 
              </th> 
              <th>Invoice </th> 
              <th>Invoice Date </th> 
              <th>Order </th> 
              <th>Bill to Name </th> 
              <th>Status </th> 
              <th>Amount </th> 
              <th class=" no-link last"> 
               <span class="nobr">Action</span> 
              </th> 
             </tr> 
            </thead> 
            <tbody> 
             <tr class="even pointer"> 
              <td class="a-center "> 
               <input type="checkbox" class="tableflat"> 
              </td> 
              <td class=" ">121000040</td> 
              <td class=" ">May 27, 2014 11:47:56 PM </td> 
              <td class=" ">121000210</td> 
              <td class=" ">John Blank L</td> 
              <td class=" ">Paid</td> 
              <td class="a-right a-right ">$7.45</td> 
              <td class=" last"> 
               <a href="#">View</a> 
              </td> 
             </tr> 
             <tr class="odd pointer"> 
              <td class="a-center "> 
               <input type="checkbox" class="tableflat"> 
              </td> 
              <td class=" ">121000039</td> 
              <td class=" ">May 28, 2014 11:30:12 PM</td> 
              <td class=" ">121000208</td> 
              <td class=" ">John Blank L</td> 
              <td class=" ">Paid</td> 
              <td class="a-right a-right ">$741.20</td> 
              <td class=" last"> 
               <a href="#">View</a> 
              </td> 
             </tr> 
            </tbody> 
           </table> 
         <tbody> 
          <tr class="accordion-toggle" data-toggle="collapse" data-target="#Submitted"> 
           <td><i class="fa fa-plus"></i> Submitted</td> 
           <td>2</td> 
           <td>$400,000</td> 
          </tr> 
          <tr> 
           <td class="accordion-body collapse" colspan="3" id="Submitted"> 
            <table class="table table-responsive table-striped"> 
             <thead> 
             <th>Loan #</th> 
             <th>Borrower</th> 
             <th>Program</th> 
             <th>Loan Amount</th> 
             </thead> 
             <tbody> 
              <tr> 
               <td>123</td> 
               <td>John Smith</td> 
               <td>Conventional</td> 
               <td>$100,000</td> 
              </tr> 
              <tr> 
               <td>321</td> 
               <td>Bob Sanders</td> 
               <td>FHA</td> 
               <td>$300,000</td> 
              </tr> 
             </tbody> 
            </table> 
           </td> 
          </tr> 
          <tr class="accordion-toggle" data-toggle="collapse" data-target="#Locked"> 
           <td><i class="fa fa-plus"></i> Locked</td> 
           <td>5</td> 
           <td>$800,000</td> 
          </tr> 
          <tr> 
           <td class="accordion-body collapse" colspan="3" id="Locked"> 
            <table class="table table-responsive table-striped"> 
             <thead> 
             <th>Loan #</th> 
             <th>Borrower</th> 
             <th>Program</th> 
             <th>Loan Amount</th> 
             </thead> 
             <tbody> 
              <tr> 
               <td>5</td> 
               <td>John Doe</td> 
               <td>Conventional</td> 
               <td>$100,000</td> 
              </tr> 
              <tr> 
               <td>6</td> 
               <td>Jane Doe</td> 
               <td>FHA</td> 
               <td>$300,000</td> 
              </tr> 
             </tbody> 
            </table> 
           </td> 
          </tr> 


          </td> 
          </tr> 
         </tbody> 
        </table> 

       </div> 
      </div> 
     </div>

希望這可以幫助你。

來源

2016-02-20 04:16:11

相關問題