Проблема выравнивания таблицы

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">↑</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> 
    <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

Не использовать две таблицы, только одну таблицу заголовок и строки таблицы

см рабочий fiddle,

<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

Не используйте вложенные таблицы. Для этой таблицы, вам просто нужно две строки таблицы <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/