2


我正在尝试将 TD 标签值与 TH 标签值对齐，但在这里我遇到了一些对齐问题。请帮我解决这个问题。
我在这里尝试了jsfiddle Html 代码：

<table class="table table-bordered">

    <tbody>
        <tr id="groupListHeader" class="row-fluid bold">

            <th>Organization<br/>
                <button id="A_1" class="sort_asc">↑&lt;/button><button id="D_1" class="sort_desc">↓&lt;/button>
            </th>

                <th>Group Code<br/>
                <button id="A_2" class="sort_asc">↑&lt;/button><button id="D_2" class="sort_desc">↓&lt;/button>
            </th>

                <th>Created On<br/>
                <button id="A_3" class="sort_asc">↑&lt;/button><button id="D_3" class="sort_desc">↓&lt;/button>
            </th>

                <th>Loan Profiles<br/>
                <button id="A_4" class="sort_asc">↑&lt;/button><button id="D_4" class="sort_desc">↓&lt;/button>
            </th>

                <th>Allocated<br/>
                <button id="A_5" class="sort_asc">↑&lt;/button><button id="D_5" class="sort_desc">↓&lt;/button>
            </th>

                <th>Need Detail<br/>
                <button id="A_6" class="sort_asc">↑&lt;/button><button id="D_6" class="sort_desc">↓&lt;/button>
            </th>

                <th>Rejected<br/>
                <button id="A_7" class="sort_asc">↑&lt;/button><button id="D_7" class="sort_desc">↓&lt;/button>
            </th>

                <th>To Publish<br/>
                <button id="A_8" class="sort_asc">↑&lt;/button><button id="D_8" class="sort_desc">↓&lt;/button>
            </th>

                <th>Not Allocated<br/>
                <button id="A_9" class="sort_asc">↑&lt;/button><button id="D_9" class="sort_desc">↓&lt;/button>
            </th>

    </tr>
    <tr>
    <td colspan="12" id="groupData">










    <table class="table">
    <tbody><tr>
    <td><a href="/borrowerReview/groupCodesAAView.action?fb=1&amp;fp=134871839">Freedom From Hungers</a></td>
    <td class="span2">
        <a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=0">
            <span class="mttp-pop curpointer" data-placement="right" data-title="Group code detail" data-content="&lt;ul class=&quot;pull-0&quot;&gt;&lt;li&gt;Status : DRAFT&lt;/li&gt;&lt;li&gt;Tenure: 12&lt;/li&gt;&lt;li&gt;Expiry Date: 09-01-2013&lt;/li&gt; &lt;li&gt;Repayment Mode : EWI&lt;/li&gt;&lt;li&gt;Max Loans: 10&lt;/li&gt;&lt;/ul&gt;" data-original-title="" title="">
                Fre_Bro_7_05Jan13
            </span>
        </a>
    </td>
    <td>05-01-2013</td>
    <td>0</td>
    <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=1">0</a></td>
    <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=2">0</a></td>
    <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=3">0</a></td>
    <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=4">0</a></td>
    <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=5">0</a></td>

        <td>
            <a href="/borrowerReview/editLoanGroup.action?gc=587"><i class="icon icon-cog"></i></a>
        </td>

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



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

2 回答 2

1

不要使用两个表格，只使用一个表格作为标题和表格行，

看工作小提琴，

<div class="container">
    <div class="row">
        <div class="span12">
            <table class="table table-bordered table-condensed">
                <thead>
                    <tr>
                        <th>
                            Organization
                            <br>
                            <button id="A_1" class="sort_asc">?</button>
                            <button id="D_1" class="sort_desc">?</button>                           
                        </th>
                        <th>
                            Group Code
                            <br>
                            <button id="A_2" class="sort_asc">?</button>
                            <button id="D_2" class="sort_desc">?</button>                           
                        </th>
                        <th>
                            Created On
                            <br>
                            <button id="A_3" class="sort_asc">?</button>
                            <button id="D_3" class="sort_desc">?</button>                           
                        </th>
                        <th>
                            Loan Profiles
                            <br>
                            <button id="A_4" class="sort_asc">?</button>
                            <button id="D_4" class="sort_desc">?</button>                           
                        </th>
                        <th>Allocated
                            <br>
                            <button id="A_5" class="sort_asc">?</button>
                            <button id="D_5" class="sort_desc">?</button>
                        </th>   
                        <th>Need Detail
                            <br>
                            <button id="A_6" class="sort_asc">?</button>
                            <button id="D_6" class="sort_desc">?</button>
                        </th>
                        <th>Rejected
                            <br>
                            <button id="A_7" class="sort_asc">?</button>
                            <button id="D_7" class="sort_desc">?</button>
                        </th>
                        <th>To Publish
                            <br>
                            <button id="A_8" class="sort_asc">?</button>
                            <button id="D_8" class="sort_desc">?</button>
                        </th>
                        <th>Not Allocated
                            <br>
                            <button id="A_9" class="sort_asc">?</button>
                            <button id="D_9" class="sort_desc">?</button>
                        </th>
                    </tr>
                </thead>
                <tbody>
                        <tr>
                            <td><a href="/borrowerReview/groupCodesAAView.action?fb=1&amp;fp=134871839">Freedom From Hungers</a>
                            </td>
                            <td class="col-md-2">   <a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=0">
            <span class="mttp-pop curpointer" data-placement="right" data-title="Group code detail" data-content="&lt;ul class=&quot;pull-0&quot;&gt;&lt;li&gt;Status : DRAFT&lt;/li&gt;&lt;li&gt;Tenure: 12&lt;/li&gt;&lt;li&gt;Expiry Date: 09-01-2013&lt;/li&gt; &lt;li&gt;Repayment Mode : EWI&lt;/li&gt;&lt;li&gt;Max Loans: 10&lt;/li&gt;&lt;/ul&gt;" data-original-title="" title="">
                Fre_Bro_7_05Jan13
            </span>
        </a>

                            </td>
                            <td>05-01-2013</td>
                            <td>0</td>
                            <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=1">0</a>
                            </td>
                            <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=2">0</a>
                            </td>
                            <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=3">0</a>
                            </td>
                            <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=4">0</a>
                            </td>
                            <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=5">0</a>
                            </td>
                            <td>    <a href="/borrowerReview/editLoanGroup.action?gc=587"><i class="icon icon-cog"></i></a>

                            </td>
                        </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
于 2013-09-13T08:30:33.937 回答
1

不要使用嵌套表。对于此表，您只需要两个表行<tr>第一行将包含标题<th>，第二行将包含所有数据<td>

这里：

<table class="table table-bordered">
    <tr>
        <th>Organization<br/>
            <button id="A_1" class="sort_asc">?</button><button id="D_1" class="sort_desc">?</button>
        </th>

        <th>Group Code<br/>
            <button id="A_2" class="sort_asc">?</button><button id="D_2" class="sort_desc">?</button>
        </th>

        <th>Created On<br/>
            <button id="A_3" class="sort_asc">?</button><button id="D_3" class="sort_desc">?</button>
        </th>

        <th>Loan Profiles<br/>
            <button id="A_4" class="sort_asc">?</button><button id="D_4" class="sort_desc">?</button>
        </th>

        <th>Allocated<br/>
            <button id="A_5" class="sort_asc">?</button><button id="D_5" class="sort_desc">?</button>
        </th>

        <th>Need Detail<br/>
            <button id="A_6" class="sort_asc">?</button><button id="D_6" class="sort_desc">?</button>
        </th>

        <th>Rejected<br/>
            <button id="A_7" class="sort_asc">?</button><button id="D_7" class="sort_desc">?</button>
        </th>

        <th>To Publish<br/>
            <button id="A_8" class="sort_asc">?</button><button id="D_8" class="sort_desc">?</button>
        </th>

        <th>Not Allocated<br/>
            <button id="A_9" class="sort_asc">?</button><button id="D_9" class="sort_desc">?</button>
        </th>
        <th></th>
    </tr>
    <tr>
        <td><a href="/borrowerReview/groupCodesAAView.action?fb=1&amp;fp=134871839">Freedom From Hungers</a></td>
        <td>
            <a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=0">
                <span class="mttp-pop curpointer" data-placement="right" data-title="Group code detail" data-content="&lt;ul class=&quot;pull-0&quot;&gt;&lt;li&gt;Status : DRAFT&lt;/li&gt;&lt;li&gt;Tenure: 12&lt;/li&gt;&lt;li&gt;Expiry Date: 09-01-2013&lt;/li&gt; &lt;li&gt;Repayment Mode : EWI&lt;/li&gt;&lt;li&gt;Max Loans: 10&lt;/li&gt;&lt;/ul&gt;" data-original-title="" title="">
                    Fre_Bro_7_05Jan13
                </span>
            </a>
        </td>
        <td>05-01-2013</td>
        <td>0</td>
        <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=1">0</a></td>
        <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=2">0</a></td>
        <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=3">0</a></td>
        <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=4">0</a></td>
        <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=5">0</a></td>
        <td>
            <a href="/borrowerReview/editLoanGroup.action?gc=587"><i class="icon icon-cog"></i></a>
        </td>
    </tr>
</table>

在这里看到它：http: //jsfiddle.net/hJSBs/9/

于 2013-09-13T08:31:17.937 回答