Scrolling html table with header background

Question

I have a table where the user can scroll though the rows when they are overflowing the div. However currently the table header row does not have a constant background for the full width of the table. Which means when I currently scroll i can see the other td content beneath the table headers.

Working code (basic version):

https://codepen.io/aarontot1/pen/LYVPEom

Does anyone know how to fix this?

Akhil Aravind · Accepted Answer

This is because your thead has 6 td and in the tbody each tr you have 11 td items. This is causing the overlap issue. You can fix it by adding colspan="" attribute to the thead - td item. I made a quick fix by adding colspan to the last td in thead. Check the snippet

////////////////// Edit supplier modal
var $ = jQuery;
$ (document).click (function (event) {
  $target = $ (event.target);
  if (
    !$target.closest ('#openModal').length &&
    $ ('#openModal').is (':visible')
  ) {
    $ ('#my-modal').modal ('hide');
  }
  if (
    !$target.closest ('#openModal_new').length &&
    $ ('#openModal_new').is (':visible')
  ) {
    $ ('#my-modal_new').modal ('hide');
  }
});

function get_data_for_edit_modal () {
  document
    .getElementById ('MainContent_button_load_row_in_db_on_modal1')
    .click ();
}

// Place the contents of the file.js here.

$ (document).ready (function () {
  $ ('.filterable .btn-filter').click (function () {
    var $panel = $ (this).parents ('.filterable'),
      $filters = $panel.find ('.filters input'),
      $tbody = $panel.find ('.table tbody');
    if ($filters.prop ('disabled') == true) {
      $filters.prop ('disabled', false);
      $filters.first ().focus ();
    } else {
      $filters.val ('').prop ('disabled', true);
      $tbody.find ('.no-result').remove ();
      $tbody.find ('tr').show ();
    }
  });

  $ ('.filterable .filters input').keyup (function (e) {
    /* Ignore tab key */
    var code = e.keyCode || e.which;
    if (code == '9') return;
    /* Useful DOM data and selectors */
    var $input = $ (this),
      inputContent = $input.val ().toLowerCase (),
      $panel = $input.parents ('.filterable'),
      column = $panel.find ('.filters th').index ($input.parents ('th')),
      $table = $panel.find ('.table'),
      $rows = $table.find ('tbody tr');
    /* Dirtiest filter function ever ;) */
    var $filteredRows = $rows.filter (function () {
      var value = $ (this).find ('td').eq (column).text ().toLowerCase ();
      return value.indexOf (inputContent) === -1;
    });
    /* Clean previous no-result if exist */
    $table.find ('tbody .no-result').remove ();
    /* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
    $rows.show ();
    $filteredRows.hide ();
    /* Prepend no-result row if all rows are filtered */
    if ($filteredRows.length === $rows.length) {
      $table
        .find ('tbody')
        .prepend (
          $ (
            'No result found'
          )
        );
    }
  });
});

///////////this is to sort the table by header clicking

function sortTable (n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById ('myTable');
  switching = true;
  // Set the sorting direction to ascending:
  dir = 'asc';
  /* Make a loop that will continue until
    no switching has been done: */
  while (switching) {
    // Start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /* Loop through all table rows (except the
        first, which contains table headers): */
    for (i = 1; i < rows.length - 1; i++) {
      // Start by saying there should be no switching:
      shouldSwitch = false;
      /* Get the two elements you want to compare,
            one from current row and one from the next: */
      x = rows[i].getElementsByTagName ('TD')[n];
      y = rows[i + 1].getElementsByTagName ('TD')[n];
      /* Check if the two rows should switch place,
            based on the direction, asc or desc: */
      if (dir == 'asc') {
        if (x.innerHTML.toLowerCase () > y.innerHTML.toLowerCase ()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      } else if (dir == 'desc') {
        if (x.innerHTML.toLowerCase () < y.innerHTML.toLowerCase ()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
            and mark that a switch has been done: */
      rows[i].parentNode.insertBefore (rows[i + 1], rows[i]);
      switching = true;
      // Each time a switch is done, increase this count by 1:
      switchcount++;
    } else {
      /* If no switching has been done AND the direction is "asc",
            set the direction to "desc" and run the while loop again. */
      if (switchcount == 0 && dir == 'asc') {
        dir = 'desc';
        switching = true;
      }
    }
  }
}

////

.tableFixHead {
    overflow-y: auto;
    height: 250px;
}

.tableFixHead thead th {
    position: sticky;
    top: 0;
}

/*////////////////// Edit supplier modal*/

.edit_modal {
    width: 500px;
}

.table_row_click {
    cursor: pointer;
}

body {
    background-color: rgb(229, 229, 229);
}

th {
    cursor: pointer;
}

/* Place the contents of the file.css here */

.filterable {
    margin-top: 15px;
}

.filterable .panel-heading .pull-right {
    margin-top: -20px;
}

.filterable .filters input[disabled] {
    background-color: transparent;
    border: none;
    cursor: auto;
    box-shadow: none;
    padding: 0;
    height: auto;
}

.filterable .filters input[disabled]::-webkit-input-placeholder {
    color: #333;
}

.filterable .filters input[disabled]::-moz-placeholder {
    color: #333;
}

.filterable .filters input[disabled]:-ms-input-placeholder {
    color: #333;
}

.button_border {
    border-color: red;
}

/*Bootstrap table-hover*/

.table-hover tbody tr:hover td {
    background-color: rgba(78, 115, 223, 0.3);
}

.panel-primary>.panel-heading-custom {
    background: rgb(78, 115, 222);
    color: #fff;
}

.btn_trans {
    color: black;
    background-color: rgba(255, 255, 255, 1);
}

.test {
    border: none;
}

td_true_green {
    color: green;
    font-weight: bold;
}

td_true_red {
    color: red;
    font-weight: bold;
}

url_link_blue_with_underline {
    color: blue;
}

.shadow {
    -webkit-box-shadow: 0px 10px 10px 0px rgb(229, 229, 229);
    -moz-box-shadow: 0px 10px 10px 0px rgb(229, 229, 229);
    box-shadow: 0px 4px 3px 0px rgb(229, 229, 229);
}

/*Bootstrap delete outline hover button*/

.btn-outline-danger {
    color: #dc3545;
    background-color: transparent;
    background-image: none;
    /*border-color: #dc3545*/
}

.btn-outline-danger:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545
}

.btn-outline-danger.focus, .btn-outline-danger:focus {
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .5)
}

.btn-outline-danger.disabled, .btn-outline-danger:disabled {
    color: #dc3545;
    background-color: transparent
}

.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show>.btn-outline-danger.dropdown-toggle {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545
}

.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .5)
}

/*Bootstrap cancel hover button*/

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d
}

.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62
}

.btn-secondary.focus, .btn-secondary:focus {
    box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .5)
}

.btn-secondary.disabled, .btn-secondary:disabled {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d
}

.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: #545b62;
    border-color: #4e555b
}

.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .5)
}



    
        
            

                
                    
                
                    
                
                    
                
                
                    
                
                    
                

            
        
        
            
                3
                 name
                 46518161
                 sfdsdfsdfdsfsd@outlook.com
                
                    www.testwebsite.com
                
                
                    True
                
                 
                 
                
                 
                
            
            
                4
                 test
                 0
                 
                 
                
                    False
                
                 
                 
                
                 
                
            
            
                5
                 test
                 0
                 
                 
                
                    True
                
                 
                 
                
                 
                
            
            
                6
                 test
                 0
                 
                 
                
                    True

Scrolling html table with header background

Answers (1)

Related Questions