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

Posted 2023-03-06

【中文标题】带有标题背景的滚动html表格

【英文标题】：Scrolling html table with header background

【发布时间】：2020-05-19 20:49:11

【问题描述】：

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

---

工作代码（基础版）：

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

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

【参考方案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'> [e-mail]</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>