Table headers and table data are not in line

I’m using two separate div

1st div is for table header
2nd div is for table data

issue is …table header and table data are not in line. they are out of columns.
screnshot attached.

code

<div>
       <table width="100%" class="table-bordered table table-striped table-hover display responsive nowrap" id="">
		<thead class="Tbl_Hdr">
			<tr>
				<th class="sorting_asc column1">Select</th>
				<th class="sorting_asc">Customer ID</th>
				<th class="sorting_asc">Customer Rank</th>
				<th class="sorting_asc">Customer Status</th>
				<th class="sorting_asc">Name</th>
				<th class="sorting_asc">Last Name</th>
				<th class="sorting_asc">Email Address</th>
				<th class="sorting_asc">Mobile Number</th>
				<th class="sorting_asc">Creation Date</th>
				<th class="sorting_asc">Last Modified Date</th>
			</tr>
		</thead>
	</table>
</div>
								
<div class="clearfix mT20 scrollTableDiv">
	<table width="100%" class="table-bordered table table-striped table-hover display responsive nowrap" id="">
		<tbody>
			<tr data-ng-repeat="customerSearchOutput in customerSearchOutputList | orderBy:'customerId':true" class="ng-scope">
				<td class="text-center"> <input type="radio" name="rdo" data-ng-value="53" ng-click="setSelectedCustomerInfo(customerSearchOutput.customerId,customerSearchOutput.party_id);" value="53"></td>
				<td class="ng-binding"> 53 </td>
				<td class="ng-binding">Silver</td>
				<td class="ng-binding">Active</td>
				<td class="ng-binding">test1</td>
				<td class="ng-binding"></td>
				<td><a class="ng-binding">  </a></td>
				<td class="ng-binding"> 244 </td>

				<td class="ng-binding">11/23/2017</td>
				<td class="ng-binding">11/23/2017</td>                   
			</tr>
		</tbody>
	</table>
</div>

How do I make them in line ? screenshot attached

class

.scrollTableDiv {
    margin-bottom: 20px;
    max-height: 170px;
    overflow-y: auto;
    width: 99.5%;
}

.mT20 {
    margin-top: 20px;
}

and ng-binding is a generated class by angular js 1.3

Could you please explain why you are using two different divs, instead of putting all of this in one table. If it were in a single table, then the cells would line up.

2 Likes

to keep headers fixed ( i.e div 1). … and make data rows scrollable and ( i.e div 2)

what changes required in my existing code to achieve that ?

There is a very recent thread discussing a similar issue, although there the table also required a fixed footer:

Flexible HTML Table with Fixed Header and Footer around a Scrollable Body

1 Like

thanks…I can not have footer in my table.

I am looking for some tricks or some changes in my existing code as a workaround to this problem.

N.B: I’m using bootstrap 3.3.1 and bootstrap classes in my example
class="table-bordered table table-striped table-hover display responsive nowrap"

Then leave it out. The technique is still the same.

The only real solution to your problem using 2 tables is to use the table-layout:fixed algorithm (applied to the table element) and then give a width to each cell in both tables (both tables must be the same and then they will obey the widths that are set). It is not possible to make 2 unrelated elements keep track with each other automatically.

In the link TechnoBear gave one of the first methods mentioned (without js) will work for fluid width table headers but comes with a few caveats, Read the thread for more details.

In the end the only real wy to do this effectively is with js and there are plenty of examples in that thread or on the web that can accomplish this (mine is better than most but all come at a price in one way or another).

1 Like

okay Paul,
thanks for the detailed explanation. I’ll surely give it a detailed look.

Since I’m using bootstrap 3 …is there anything from there on the plate to reuse and try in my existing code as a trial ? any benefit from bootstrap 3 in this regard ?

I believe bootstrap has a sticky header method so you could utilise that but you would still need to size the table-cells to be the same in both the header and table. There are some bootply examples but I believe they are percentage width also.

Fixed table headers unfortunately are never easy to implement.:frowning:

2 Likes

If the goal is to have the table header not move out of view on a long table (what was that column again?) maybe repeating the table header every several rows would be an approach that would work.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.