Bootstrap 中的嵌套表未正确排列答案

【问题标题】：Nested Tables in Bootstrap Not Lining Up CorrectlyBootstrap 中的嵌套表未正确排列
【发布时间】：2017-01-26 05:59:13
【问题描述】：

我在引导程序中有一系列嵌套表，但每个类别中的子表排列不正确。代码太长，无法在此处发布，但我在这个小提琴中有它：https://jsfiddle.net/c310uxxf/1

这是一个sn-p的代码：

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

它实际上看起来比所有主题和自定义的小提琴要好一些，但它仍然没有正确排列。我试图让子表（注册、提交和锁定下的子表）跨越它们嵌套的表的整个宽度。它可能很简单，但我就是想不通。

任何帮助都会很棒。

【问题讨论】：

在您的 html..line 311 中，确保您已正确构建 <tbody> 和 <table>

标签： html css twitter-bootstrap html-table

【解决方案1】：

正如您所提到的，您希望子表（Registered、Submitted 和 Locked 下的那些）跨越它们嵌套的表的整个宽度。

问题是子表是在 tr 的一个 td 中定义的，但它的兄弟 tr 有三列，因此对于具有此子表的 tr，您必须将一列合并为三列，即 colspan="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>

希望对你有所帮助。

【讨论】：