html - テーブル配置の問題

Question

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>

Answer 1

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>

Answer 2

ネストされたテーブルを使用しないでください。このテーブルでは、2 つのテーブル行が必要です<tr>。最初の行には見出しが含まれ、<th>2 番目の行にはすべてのデータが含まれます。<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/