table 的粘性第一行具有相同的列宽

Question

我正在尝试创建 table (header) 的粘性第一行，但是当我这样做时，header 具有不同的列宽。

加载 table 时，它看起来像：

   |   heada    |   headb    |   headc    |   headd    |
   |  contenta  |  contentb  |  contentc  |  contentd  |
   |  contenta  |  contentb  |  contentc  |  contentd  |

当我向下滚动时，它看起来像：

   | heada | headb | headc | headd |                   |
   |  contenta  |  contentb  |  contentc  |  contentd  |
   |  contenta  |  contentb  |  contentc  |  contentd  |

html/php:

if(mysql_num_rows($show_firm) >0)
{
  echo '<table class="tableList">';

       // first tr/header

  echo'<tr class="tableListforstickymenu">';        

       foreach($show_columns_firm as $key => $v)
       {
          echo '<td class="tableList-TD-first">'.$v.'</td>';
       }
  echo '</tr>';

      // other tr

  while($r = mysql_fetch_assoc($show_firm))
  {                 
      echo'<tr class="tableList">';
      foreach($show_columns_firm as $key => $v)
      {
          echo '<td class="tableList-TD-first">'.$v.'</td>';
      }
      echo '</tr></table>';
  }
 }

css:

.tableListforstickymenu {
    border: 1px solid #DBF4FF;
    background-color: #B9DBE8;
    border-collapse: collapse; 
    text-align: left;
    overflow-wrap: break-word;
    table-layout: fixed;
    padding: 10px 1px;
    margin: 0px auto;
}
.stickymenu {
    position: fixed;
    width: 100%;
    left: 0;
    top: 130px;
    z-index: 100;
    border: 0;
}

jQuery:

$(document).ready(function()
 {
   var stickyNavTop = $('.tableListforstickymenu').offset().top;

   var stickyNav = function()
    {
        var scrollTop = $(window).scrollTop();

        if (scrollTop > stickyNavTop) 
        { 
            $('.tableListforstickymenu').addClass('stickymenu');
        }
        else 
        {
            $('.tableListforstickymenu').removeClass('stickymenu'); 
        }
  };
  stickyNav();
  $(window).scroll(function()
  {
      stickyNav();
  });
 });

我不知道如何将第一个粘滞行 (header) 与 table 的其余行对齐。还有一件事：table 比屏幕宽（它大约有 30 列并且有滚动条）。

Answer 1

我认为这是一个 CSS / HTML 问题，我已将你的 table 分成两部分（当你开始拆分 html [=41 时会发生尴尬的事情=]s 这种方式） - 最好只在这种布局情况下使用 css 而不是 html tables （这种拆分需要反映在你的 php) 那么你的 css 应该解决两个 table 的宽度。您的 js 现在应该适应顶部 table.

在 php 的顶部和 php 更改的中间更改 table 初始声明的 class 标签：

echo '</tr>';

至：

echo '</tr></table><table class="tableList"><tr class="tableList">';

应该可以解决问题

这里是片段：

$(document).ready(function()
 {
   var stickyNavTop = $('.tableListforstickymenu').offset().top;

   var stickyNav = function()
    {
        var scrollTop = $(window).scrollTop(),
          scrollLeft= $(window).scrollLeft();

        if (scrollTop > stickyNavTop) 
        { 
            $('.tableList-top').addClass('stickymenu');
        }
        else 
        {
            $('.tableList-top').removeClass('stickymenu'); 
        }
        
        $('.stickymenu').css({ left: -scrollLeft + 8 }); // the +8 is due to the padding you have on the main table css
        
  };
  stickyNav();
  $(window).scroll(function()
  {
      stickyNav();
  });
 });

.tableListforstickymenu {
    border: 1px solid #DBF4FF;
    background-color: #B9DBE8;
    border-collapse: collapse; 
    text-align: left;
    table-layout: fixed;
    overflow-wrap: break-word;
    padding: 10px 1px;
    margin: 0px auto;
}
.stickymenu{
    position: fixed;
    top: 0px;
    left: 10px;
    table-layout: fixed;
    z-index: 100;
    border: 0;
}

table.tableList-top td, table.tableList td{
  min-width: 5em; /* recommend using em's or px and not % here */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableList-top">
    <tr class="tableListforstickymenu">
        <td class="tableList-TD-first">alpha</td>
        <td class="tableList-TD-first">bravo</td>
        <td class="tableList-TD-first">charlie</td>
        <td class="tableList-TD-first">delta</td>
        <td class="tableList-TD-first">echo</td>
    </tr>
</table>

<table class="tableList">
<tr class="tableList">
<td class="tableList-TD-first">content_a</td>
<td class="tableList-TD-first">content_b</td>
<td class="tableList-TD-first">content_c</td>
<td class="tableList-TD-first">content_d</td>
<td class="tableList-TD-first">content_e</td>
</tr>

<tr class="tableList">
<td class="tableList-TD-first">content_a</td>
<td class="tableList-TD-first">content_b</td>
<td class="tableList-TD-first">content_c</td>
<td class="tableList-TD-first">content_d</td>
<td class="tableList-TD-first">content_e</td>
</tr>

<tr class="tableList">
<td class="tableList-TD-first">content_a</td>
<td class="tableList-TD-first">content_b</td>
<td class="tableList-TD-first">content_c</td>
<td class="tableList-TD-first">content_d</td>
<td class="tableList-TD-first">content_e</td>
</tr>

<tr class="tableList">
<td class="tableList-TD-first">content_a</td>
<td class="tableList-TD-first">content_b</td>
<td class="tableList-TD-first">content_c</td>
<td class="tableList-TD-first">content_d</td>
<td class="tableList-TD-first">content_e</td>
</tr>

<tr class="tableList">
<td class="tableList-TD-first">content_a</td>
<td class="tableList-TD-first">content_b</td>
<td class="tableList-TD-first">content_c</td>
<td class="tableList-TD-first">content_d</td>
<td class="tableList-TD-first">content_e</td>
</tr>

<tr class="tableList">
<td class="tableList-TD-first">content_a</td>
<td class="tableList-TD-first">content_b</td>
<td class="tableList-TD-first">content_c</td>
<td class="tableList-TD-first">content_d</td>
<td class="tableList-TD-first">content_e</td>
</tr>
<tr class="tableList">
<td class="tableList-TD-first">content_a</td>
<td class="tableList-TD-first">content_b</td>
<td class="tableList-TD-first">content_c</td>
<td class="tableList-TD-first">content_d</td>
<td class="tableList-TD-first">content_e</td>
</tr>
<tr class="tableList">
<td class="tableList-TD-first">content_a</td>
<td class="tableList-TD-first">content_b</td>
<td class="tableList-TD-first">content_c</td>
<td class="tableList-TD-first">content_d</td>
<td class="tableList-TD-first">content_e</td>
</tr>
<tr class="tableList">
<td class="tableList-TD-first">content_a</td>
<td class="tableList-TD-first">content_b</td>
<td class="tableList-TD-first">content_c</td>
<td class="tableList-TD-first">content_d</td>
<td class="tableList-TD-first">content_e</td>
</tr>
<tr class="tableList">
<td class="tableList-TD-first">content_a</td>
<td class="tableList-TD-first">content_b</td>
<td class="tableList-TD-first">content_c</td>
<td class="tableList-TD-first">content_d</td>
<td class="tableList-TD-first">content_e</td>
</tr>
<tr class="tableList">
<td class="tableList-TD-first">content_a</td>
<td class="tableList-TD-first">content_b</td>
<td class="tableList-TD-first">content_c</td>
<td class="tableList-TD-first">content_d</td>
<td class="tableList-TD-first">content_e</td>
</tr>
<tr class="tableList">
<td class="tableList-TD-first">content_a</td>
<td class="tableList-TD-first">content_b</td>
<td class="tableList-TD-first">content_c</td>
<td class="tableList-TD-first">content_d</td>
<td class="tableList-TD-first">content_e</td>
</tr>
<tr class="tableList">
<td class="tableList-TD-first">content_a</td>
<td class="tableList-TD-first">content_b</td>
<td class="tableList-TD-first">content_c</td>
<td class="tableList-TD-first">content_d</td>
<td class="tableList-TD-first">content_e</td>
</tr>

</table>

table 的粘性第一行具有相同的列宽

sticky first row of table with the same column width

jquery

html

css

sticky