Here I am getting trouble with last column. I want last column bg-color and borders up-to vertical scroll bar

Here I am getting trouble with last column. I want last column bg-color and borders up-to ve开发者_Python百科rtical scroll bar. And header text is overlapping.

Here is the link : http://jsfiddle.net/8JvZQ/

Floating header

Added width: 100%; to .tableScrollBar table {}:

Fiddle: http://jsfiddle.net/hobobne/8JvZQ/3/

Note: This is the straight-up solution to your problem. However, if you simply wish the effect of the table header always being visible. Then you can use jQuery to make the full floatable on scroll. Here is a demo of the floating header and from here you can download it.

Last row (CSS)

This is css version of detecting the last row. However, it is not crossbrowser, since IE does recotnize :first-child but not :last-child :(

Fiddle: http://jsfiddle.net/hobobne/8JvZQ/4/

Last row (jQuery)

This is the jQuery version for detecting the last row. This is the ultimate solution!

Fiddle: http://jsfiddle.net/hobobne/8JvZQ/9/

Not full-width version

This is being done by adding display: inline-block; to the global container.

Fiddle: http://jsfiddle.net/hobobne/8JvZQ/10/

Last column being full-width (just like your screenshot)

Being done by adding class="w100pre" to phone column and also creating a new class: .w100pre {width: 100%;} that can be used globally on your site :)

Fiddle: http://jsfiddle.net/hobobne/8JvZQ/11/

NOTE: I wasted about 2 hours on this question.

here exactly like ur screenshot fixed the text overlaping. http://jsfiddle.net/8JvZQ/14/ hiding the row for fixing the overlapping text.