带有标题背景的滚动html表格

Question

我有一个table，当它们溢出div 时，用户可以在其中滚动浏览行。然而，目前table 标头row 没有table 整个宽度的恒定背景。这意味着当我当前滚动时，我可以看到table 标题下方的其他td 内容。

---

工作代码（基础版）：

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

有谁知道如何解决这个问题？

Answer 1

这是因为您的 thead 有 6 td 并且在 tbody 每个 tr 中您有 11 个 td 项目。这导致了重叠问题。您可以通过将colspan="" 属性添加到thead - td 项目来修复它。我通过将colspan 添加到thead 中的最后一个td 进行了快速修复。检查sn-p

////////////////// 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 (
          $ (
            '<tr class="no-result text-center"><td colspan="' +
              $table.find ('.filters th').length +
              '">No result found</td></tr>'
          )
        );
    }
  });
});

///////////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)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class='tableFixHead' style='height:80px'>
    <table id='myTable' class='td_size table table-hover test  ' style='overflow:auto;'>
        <thead>
            <tr class='filters shadow'>

                <th class='' style='background-color: rgb(252,252,252);' onclick='sortTable(0)' data-type='string'>
                    <input type='text' style='cursor: pointer' class='form-control' placeholder='ID' disabled></th>
                <th class='' style='background-color: rgb(252,252,252);' onclick='sortTable(1)' data-type='string'>
                    <input type='text' style='cursor: pointer' class='form-control' placeholder='Name' disabled></th>
                <th class='' style='background-color: rgb(252,252,252);' onclick='sortTable(2)' data-type='number'>
                    <input type='text' style='cursor: pointer' class='form-control' placeholder='Phone # 1' disabled>
                </th>
                <th class='' style='background-color: rgb(252,252,252);' onclick='sortTable(3)' data-type='string'>
                    <input type='text' style='cursor: pointer' class='form-control' placeholder='Email 1' disabled></th>
                <th class='' style='background-color: rgb(252,252,252);' onclick='sortTable(4)' data-type='string'>
                    <input type='text' style='cursor: pointer' class='form-control' placeholder='Website' disabled></th>
                <th class='' style='background-color: rgb(252,252,252);' onclick='sortTable(5)' data-type='string'
                    colspan='6'><input type='text' style=' cursor: pointer' class='form-control' placeholder='Active'
                        disabled></th>

            </tr>
        </thead>
        <tbody>
            <tr class='shadow '>
                <td class='td_size table_row_click' style='vertical-align: middle'>3</td>
                <td class='td_size table_row_click' style='vertical-align: middle'> name</td>
                <td class='td_size table_row_click' style='vertical-align: middle'> 46518161</td>
                <td class='td_size table_row_click' style='vertical-align: middle'> sfdsdfsdfdsfsd@outlook.com</td>
                <td class='td_size table_row_click' style='vertical-align: middle'>
                    <url_link_blue_with_underline>www.testwebsite.com</url_link_blue_with_underline>
                </td>
                <td class='table_row_click' vertical-align: middle'>
                    <td_true_green>True</td_true_green>
                </td>
                <td class='td_size table_row_click' style='vertical-align: middle'> </td>
                <td style='padding-left: 0px; '> <button type='button' id='3'
                        onClick='button_show_modal_edit_supplier_click(this.id)'
                        style='padding-left:0; padding-right:0; padding-bottom:0; padding-top:0;font-size:17px'
                        class='btn btn-outline-info '><i class='far fa-edit'></i></button>
                <td>
                <td style='padding-left: 0px; '> <button type='button' id='3' onClick='delete_row(this.id)'
                        style='padding-left:0; padding-right:0; padding-bottom:0; padding-top:0;font-size:17px'
                        class='btn btn-outline-danger ' data-toggle='modal' data-target='#exampleModalCenter'><i
                            class='far fa-trash-alt '></i></button>
                <td>
            </tr>
            <tr class='shadow '>
                <td class='td_size table_row_click' style='vertical-align: middle'>4</td>
                <td class='td_size table_row_click' style='vertical-align: middle'> test</td>
                <td class='td_size table_row_click' style='vertical-align: middle'> 0</td>
                <td class='td_size table_row_click' style='vertical-align: middle'> </td>
                <td class='td_size table_row_click' style='vertical-align: middle'> </td>
                <td class='table_row_click' vertical-align: middle'>
                    <td_true_red>False</td_true_red>
                </td>
                <td class='td_size table_row_click' style='vertical-align: middle'> </td>
                <td style='padding-left: 0px; '> <button type='button' id='4'
                        onClick='button_show_modal_edit_supplier_click(this.id)'
                        style='padding-left:0; padding-right:0; padding-bottom:0; padding-top:0;font-size:17px'
                        class='btn btn-outline-info '><i class='far fa-edit'></i></button>
                <td>
                <td style='padding-left: 0px; '> <button type='button' id='4' onClick='delete_row(this.id)'
                        style='padding-left:0; padding-right:0; padding-bottom:0; padding-top:0;font-size:17px'
                        class='btn btn-outline-danger ' data-toggle='modal' data-target='#exampleModalCenter'><i
                            class='far fa-trash-alt '></i></button>
                <td>
            </tr>
            <tr class='shadow '>
                <td class='td_size table_row_click' style='vertical-align: middle'>5</td>
                <td class='td_size table_row_click' style='vertical-align: middle'> test</td>
                <td class='td_size table_row_click' style='vertical-align: middle'> 0</td>
                <td class='td_size table_row_click' style='vertical-align: middle'> </td>
                <td class='td_size table_row_click' style='vertical-align: middle'> </td>
                <td class='table_row_click' vertical-align: middle'>
                    <td_true_green>True</td_true_green>
                </td>
                <td class='td_size table_row_click' style='vertical-align: middle'> </td>
                <td style='padding-left: 0px; '> <button type='button' id='5'
                        onClick='button_show_modal_edit_supplier_click(this.id)'
                        style='padding-left:0; padding-right:0; padding-bottom:0; padding-top:0;font-size:17px'
                        class='btn btn-outline-info '><i class='far fa-edit'></i></button>
                <td>
                <td style='padding-left: 0px; '> <button type='button' id='5' onClick='delete_row(this.id)'
                        style='padding-left:0; padding-right:0; padding-bottom:0; padding-top:0;font-size:17px'
                        class='btn btn-outline-danger ' data-toggle='modal' data-target='#exampleModalCenter'><i
                            class='far fa-trash-alt '></i></button>
                <td>
            </tr>
            <tr class='shadow '>
                <td class='td_size table_row_click' style='vertical-align: middle'>6</td>
                <td class='td_size table_row_click' style='vertical-align: middle'> test</td>
                <td class='td_size table_row_click' style='vertical-align: middle'> 0</td>
                <td class='td_size table_row_click' style='vertical-align: middle'> </td>
                <td class='td_size table_row_click' style='vertical-align: middle'> </td>
                <td class='table_row_click' vertical-align: middle'>
                    <td_true_green>True</td_true_green>
                </td>
                <td class='td_size table_row_click' style='vertical-align: middle'> </td>
                <td style='padding-left: 0px; '> <button type='button' id='6'
                        onClick='button_show_modal_edit_supplier_click(this.id)'
                        style='padding-left:0; padding-right:0; padding-bottom:0; padding-top:0;font-size:17px'
                        class='btn btn-outline-info '><i class='far fa-edit'></i></button>
                <td>
                <td style='padding-left: 0px; '> <button type='button' id='6' onClick='delete_row(this.id)'
                        style='padding-left:0; padding-right:0; padding-bottom:0; padding-top:0;font-size:17px'
                        class='btn btn-outline-danger ' data-toggle='modal' data-target='#exampleModalCenter'><i
                            class='far fa-trash-alt '></i></button>
                <td>
            </tr>
        </tbody>
    </table>
</div>