Question

我正在尝试创建粘性的第一行表（标题），但是当我这样做时，标题具有不同的列宽。

当表格加载时，它看起来像：

   |   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();
  });
 });

我不知道如何将第一个粘性行（标题）与表的其余部分对齐。还有一件事：桌子比屏幕宽（大约30列并且有卷轴）。

Answer 1

我相信这是一个CSS / HTML问题，我把你的桌子分成了两个（当你开始以这种方式分割html表时会发生尴尬的事情） - 使用css是更好的做法只有像这样的布局情况而不是html表（这个拆分需要反映在你的php中）然后你的css应该解决两个表的宽度。你的js现在应该适应目标顶层。

在php的顶部和php更改过程中更改初始表声明的类标签：

id, products_id, products_colours_id, products_sizes_id, quantity

为：

echo '</tr>';

应该做的伎俩

摘录在这里：

＆＃13;

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

＆＃13;

$(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();
  });
 });

＆＃13;

.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 */
}

＆＃13;

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

1 个答案: