0

I have a scrollable table in which I keep the headers visible as the table scrolls. The problem is that the border on the bottom of the tbody extends all the way to the end of the scrollbar. Since the scrollbar will hide when there is not enough data, this just leaves the border extending past the columns a few pixes.

How can I either make this border just as long as the columns in the tbody, or shrink when the scrollbar hides? I have tried moving the scroll to a div above the table, but this causes the headers to not freeze so I can't do that. I have also moved the border to different elements but they are all the same size. I can add whatever is needed to this html.

Another option would be to completely hide the bottom border if the table is not scrollable as there is a border at the bottom of the table already via the CSS.

  <table id="driving" class="table2">
        <thead style="display: block">
            <tr>
                <th scope="col" id="unit" class="sort">
                    <a href="#">Unit</a>
                </th>
                <th id="startDateTime" class="sort">
                    <a href="#">StartDate</a>
                </th>
            </tr>
        </thead>
        <tbody style="max-height: 450px; overflow-y: auto; border-bottom: 1px #ccc solid; display: block">
            <tr>
                <td>
                    @item.UnitNumber
                </td>
                <td class="center">
                    @item.StartDateTime.Date
                </td>
            </tr>
        </tbody>
    </table>
mameesh
  • 3,651
  • 9
  • 37
  • 47

2 Answers2

0

One solution I have found after I posted this in another StackOverflow post: How can I check if a scrollbar is visible?

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

This will allow me to check if the scrollbar is showing and then show and hide the border via Javascript.

Community
  • 1
  • 1
mameesh
  • 3,651
  • 9
  • 37
  • 47
0

This must be an issue with Firefox. Please see below link if this is similar to your problem: https://bugzilla.mozilla.org/show_bug.cgi?id=135236

But I have also found this link to refer: http://bobcravens.com/2010/01/html-scrolling-table-with-fixed-headers-jquery-plugin/

Here is the working example:

colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });

http://jsfiddle.net/hashem/crspu/554/

Lastly, I would remove the tbody border and assign a border-bottom to the table itself OR you can also try with Float: left to thead and tbody.

prashmi
  • 93
  • 2
  • 12