Suresh Pattu
Reputation: 6209
Table alignment issue
I am trying to align the TD tag value to the TH tag value but here i am getting some alignment issue. please help me to fix this.
I tried here jsfiddle
Html code:
<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&fp=134871839">Freedom From Hungers</a></td>
<td class="span2">
<a href="/borrowerReview/viewLoanProfilesList.action?gc=587&ls=0">
<span class="mttp-pop curpointer" data-placement="right" data-title="Group code detail" data-content="<ul class="pull-0"><li>Status : DRAFT</li><li>Tenure: 12</li><li>Expiry Date: 09-01-2013</li> <li>Repayment Mode : EWI</li><li>Max Loans: 10</li></ul>" 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&ls=1">0</a></td>
<td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&ls=2">0</a></td>
<td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&ls=3">0</a></td>
<td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&ls=4">0</a></td>
<td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&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>
Upvotes: 2
Views: 83
Answers (2)
maikelsabido
Reputation: 1327
Don't use nested tables. For this table, you just need two table rows <tr> The first row will contain the headings <th> while the second one will have all the data <td>
Here:
<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&fp=134871839">Freedom From Hungers</a></td>
<td>
<a href="/borrowerReview/viewLoanProfilesList.action?gc=587&ls=0">
<span class="mttp-pop curpointer" data-placement="right" data-title="Group code detail" data-content="<ul class="pull-0"><li>Status : DRAFT</li><li>Tenure: 12</li><li>Expiry Date: 09-01-2013</li> <li>Repayment Mode : EWI</li><li>Max Loans: 10</li></ul>" 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&ls=1">0</a></td>
<td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&ls=2">0</a></td>
<td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&ls=3">0</a></td>
<td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&ls=4">0</a></td>
<td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&ls=5">0</a></td>
<td>
<a href="/borrowerReview/editLoanGroup.action?gc=587"><i class="icon icon-cog"></i></a>
</td>
</tr>
</table>
See it here: http://jsfiddle.net/hJSBs/9/
Upvotes: 1
Able
Reputation: 3912
Don't use two tables, just one table for heading and Table row,
see the working 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&fp=134871839">Freedom From Hungers</a>
</td>
<td class="col-md-2"> <a href="/borrowerReview/viewLoanProfilesList.action?gc=587&ls=0">
<span class="mttp-pop curpointer" data-placement="right" data-title="Group code detail" data-content="<ul class="pull-0"><li>Status : DRAFT</li><li>Tenure: 12</li><li>Expiry Date: 09-01-2013</li> <li>Repayment Mode : EWI</li><li>Max Loans: 10</li></ul>" 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&ls=1">0</a>
</td>
<td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&ls=2">0</a>
</td>
<td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&ls=3">0</a>
</td>
<td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&ls=4">0</a>
</td>
<td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&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>
Upvotes: 1
Related Questions
- How to right align a table row
- Columns in Table not aligned properly
- css tables out of alignment with bootstrap
- bootstrap - Align table data with each other
- table column alignment mismatch with the table header
- CSS Table alignment issue
- Table rows not aligning
- CSS: Align column in table
- Tables in Bootstrap not properly aligned
- twitter bootstrap table alignment