jquery - 如何获得标题使用表格的响应式粘性标题？-6ren

jquery - 如何获得标题使用表格的响应式粘性标题？

转载作者：太空宇宙更新时间：2023-11-04 08:34:57

$(window).scroll(function() {
    if ($(this).scrollTop() > 150){  
        $('#header').addClass("sticky");
    }
    else{
        $('#header').removeClass("sticky");
    }
});

#header
    {
        text-align: center;
        font-size: 16px;
        line-height: 108px;
        height: 108px;
        background: #335C7D;
        color: #fff;
        font-family: 'PT Sans', sans-serif;
        
        // set animation
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
        display:none;
    }

    #header.sticky 
    {
        position: fixed;
        font-size: 12px;
        line-height: 20px;
        height: 48px; 
        background: #827f7b;
        text-align: left;
        z-index: 99999;
        display: inherit;
		width: 100%;
		top:0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-responsive" id="tab">

  <tr id="example" class="disappear">
    <td width="200px" id="text" style="font-weight: bold">content</td>
    <td width="40px"><label>Never</br><input type="radio" name="ExpF" disabled /></label></td>
    <td width="40px"><label>Rarely</br><input type="radio" name="ExpF" disabled checked="checked"></label></td>
    <td width="40px"><label>Occasionally</br><input type="radio" name="ExpF" disabled></label></td>
    <td width="40px"><label>Often</br><input type="radio" name="ExpF" disabled></label></td>
    <td width="30px"><label>Constantly</br><input type="radio" name="ExpF" disabled></label></td>
    <td width="50px" bgcolor="Gainsboro"><label>Negligible</br><input type="radio" name="ExpI" disabled></label></td>
    <td width="50px" bgcolor="Gainsboro"><label>Mild</br><input type="radio" name="ExpI" disabled></label></td>
    <td width="50px" bgcolor="Gainsboro"><label>Moderate</br><input type="radio" name="ExpI" checked="checked" disabled></label></td>
    <td width="50px" bgcolor="Gainsboro"><label>Severe</br><input type="radio" name="ExpI" disabled></label></td>
    <td width="120px" bgcolor="Gainsboro"><label>Extremely severe</br><input type="radio" name="ExpI" disabled></label></td>
    <td width="30px"></td>
    <td width="30px" bgcolor="Gainsboro"></td>
  </tr>


  <tr id="header">
    <td width="230px"></td>
    <td width="40px">Never</td>
    <td width="40px">Rarely</td>
    <td width="40px">Occasionally</td>
    <td width="40px">Often</td>
    <td width="30px">Constantly</td>
    <td width="50px">Negligible</td>
    <td width="50px">Mild</td>
    <td width="50px">Moderate</td>
    <td width="50px">Severe</td>
    <td width="140px">Extremely severe</td>
    <td width="20px"></td>
    <td width="30px"></td>
  </tr>

  <tr id="empty">
    <td width="200px" id="text"></td>
    <td width="40px"></td>
    <td width="40px"></td>
    <td width="40px"></td>
    <td width="40px"></td>
    <td width="30px"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="120px" bgcolor="Gainsboro"></td>
    <td width="30px">F</td>
    <td width="30px" bgcolor="Gainsboro">I</td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
 
 <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  </table>

我打算在用户滚动整行评级指南时出现一个粘性标题(用户很容易看到评级指南而不是所有空的单选框，这对用户来说会很困惑。)所以我写了一个名为#header 的表格行，一开始是隐藏的，当break height value(150px)时出现。

我的问题是:

1) 当我调整浏览器大小时，如何确保所有对齐都正确？因为如果我调整浏览器大小，评级指南的对齐方式将不正确。

2)如何使用检查用户是否滑过#header 行而不是直接设置中断高度值(150px)的方法将类添加到我的#header 行，这是因为如果我调整浏览器大小，它会出现得更早而不是正确的位置。

这是 jsfiddle。 https://jsfiddle.net/k77vhf14/

谢谢。

最佳答案

我根据你的要求写了一个代码

问题是当 #header 有 position:fixed 时，td 的宽度被考虑在内，而 td #example 的宽度，不考虑

以后你应该知道 td { width:number px } 不起作用，你需要使用 min-width:

无论如何，所以我使用 for 循环 将 #example td 的宽度添加到相应的 #header td

还根据 #header 行高在滚动时添加了动态条件

希望这对你有好处

查看代码片段或 > Fiddle

var headHeight = $("#header").height(),
  tdlength = $("#example td").length
for (i = 0; i < tdlength; i++) {
  var tdWidth = $("#example td:eq(" + i + ")").width()
  $("#header td:eq(" + i + ")").css({
    "min-width": tdWidth,
    "width": tdWidth
  })
}

$(window).on("scroll", function() {
  if ($(this).scrollTop() > headHeight) {
    $('#header').addClass("sticky");
  } else {
    $('#header').removeClass("sticky");
  }
});

#header {
  text-align: center;
  font-size: 12px;
  line-height: 108px;
  height: 108px;
  background: #335C7D;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
  display: none;
  // set animation
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
}
label {
  font-size: 15px;
}
td {
  font-size: 14px;
}
#header td:first-child {
  visibility: hidden
}
#header.sticky td:not(:first-child) {
  font-size: 12px;
}
#header.sticky {
  font-size: 12px;
  line-height: 20px;
  height: 48px;
  background: #827f7b;
  text-align: center;
  z-index: 99999;
  display: table-row;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mata">

</div>
<table class="table table-hover table-responsive" id="tab">

  <tr id="example" class="disappear">
    <td width="200px" id="text" style="font-weight: bold">content</td>
    <td width="40px">
      <label>Never</br>
        <input type="radio" name="ExpF" disabled />
      </label>
    </td>
    <td width="40px">
      <label>Rarely</br>
        <input type="radio" name="ExpF" disabled checked="checked">
      </label>
    </td>
    <td width="40px">
      <label>Occasionally</br>
        <input type="radio" name="ExpF" disabled>
      </label>
    </td>
    <td width="40px">
      <label>Often</br>
        <input type="radio" name="ExpF" disabled>
      </label>
    </td>
    <td width="30px">
      <label>Constantly</br>
        <input type="radio" name="ExpF" disabled>
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>Negligible</br>
        <input type="radio" name="ExpI" disabled>
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>Mild</br>
        <input type="radio" name="ExpI" disabled>
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>Moderate</br>
        <input type="radio" name="ExpI" checked="checked" disabled>
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>Severe</br>
        <input type="radio" name="ExpI" disabled>
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>Extremely severe</br>
        <input type="radio" name="ExpI" disabled>
      </label>
    </td>
    <td width="30px"></td>
    <td width="30px" bgcolor="Gainsboro"></td>
  </tr>


  <tr id="header">
    <td width="">Content</td>
    <td width="40px">Never</td>
    <td width="40px">Rarely</td>
    <td width="40px">Occasionally</td>
    <td width="40px">Often</td>
    <td width="30px">Constantly</td>
    <td width="50px">Negligible</td>
    <td width="50px">Mild</td>
    <td width="50px">Moderate</td>
    <td width="50px">Severe</td>
    <td width="40px">Extremely severe</td>
    <td width="20px"></td>
    <td width="30px"></td>
  </tr>

  <tr id="empty">
    <td width="200px" id="text"></td>
    <td width="40px"></td>
    <td width="40px"></td>
    <td width="40px"></td>
    <td width="40px"></td>
    <td width="30px"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="120px" bgcolor="Gainsboro"></td>
    <td width="30px">F</td>
    <td width="30px" bgcolor="Gainsboro">I</td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  






</table>

关于jquery - 如何获得标题使用表格的响应式粘性标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44538899/

文章推荐： javascript - 表体来自 Html 但不是来自 Javascript

文章推荐： java - .NET 与 Java 在初创公司中进行 Web 应用程序开发

文章推荐： java - 使用 Apache XMLBeans 对字符串中的 XML 实体进行编码

文章推荐： javascript - 在单独的 div 悬停上缩放图像

javascript - 粘性/快速滚动不会向上滚动
我有一个脚本，允许在向下移动时快速滚动，但我无法让它允许用户向上滚动。 var items = $(".item"); var animating = false; $(window).scroll(
html - 粘性/固定下拉菜单不随页面滚动
所以我已经尝试解决这个问题几个小时了。有一个双层子菜单。如果子菜单的内容超出视口(viewport)，则当您滚动时子菜单项不会滚动。 click here to view the site 最佳答案
html - 控制移动浏览器滚动的速度(粘性)
有什么方法可以控制移动浏览器中用户在可滚动元素中滚动的速度或粘性吗？我专注于 android 浏览器。最佳答案不，滚动速度由浏览器控制(通常直接由计算机/设备上的设置控制)。我认为您的代码不会影
iis - Haproxy 粘性 session
我正在尝试使用 Haproxy 1.6.3 2015/12/25 和粘性 session 。我按照haproxy manual做的一切，但是，不幸的是，检查客户端浏览器我发现没有添加 cookie(平
java - 粘性 Eclipse 错误标记
清理并重建后，Eclipse Problems View 中出现错误标记，尽管一切都应该没问题。如何消除这种不一致的错误？最佳答案在这里，我回答自己接下来的步骤对我有用: 关闭 Eclipse
jquery - 粘性 div 工作不正确
我用这个脚本制作了粘性 div - $(window).scroll(function() { var leedoffset = $('.leed_block').offset().top;
jquery - 粘性 div 在滚动时不会粘在顶部
我希望我的 div 调用:如果我向下滚动，top 将粘在顶部，但现在它不会粘在顶部。我在这段代码中使用 jQuery: $(window).scroll(function(){ if (
javascript - 粘性 header /Javascript
早上好，我正在为我的网站制作一个粘性 header ，我已经让它工作了，但它似乎卡入到位，我想要顺利!我该怎么做？我的网站:http://www.trevorpeters.co.uk/tpwebde
jquery - 粘性 Bootstrap 导航栏不工作
我有一个用于我正在处理的小测试站点的导航栏，我需要一些帮助。我正在使用 Bootstrap(您可能会说)但无法弄清楚如何在您向下滚动时让我的导航栏保持在屏幕顶部。我希望导航栏保持在超大屏幕下方，直到您
html - 粘性 CSS 页脚损坏
我的页脚设计为位于页面底部，即使其上方的 div 仅包含少量内容。它直到最近才起作用，我似乎以某种方式破坏了它。你能看看吗？提前致谢。 CSS: body { margin: 0;
css - 粘性 flexbox 页脚未固定到底部
我想在加载时让整个 UI 适合屏幕，但我的页脚没有固定在移动设备上的 View 底部。在桌面网络浏览器上，它可以完美运行。当我在移动网络浏览器上查看此内容时，页脚位于页面下方，使页面可滚动。它不应该
html - 粘性 Div 需要被吃掉
我有一个问题。我正在创建一个由页眉、正文和页脚组成的单栏网站。在调整大小时，我可以让页脚粘在页面底部，但我的问题是这样的。如何让窗口在调整大小时“吃掉”页脚 div 而不是将其向上推？一个很好的例子是
javascript - 粘性 header 在滚动时无法正常工作
我正在尝试实现一个粘性标题，在滚动超过 100-150 像素之前不会发生任何事情。向上滚动时它会显示出来，向下滚动时它会再次隐藏，当您滚动回页面顶部时也会返回到它的原始状态。这正是我想要的外观/感觉
html - 粘性 header 始终可见？
我正在使用一个名为“Thematosoup 的 Sticky header”的 WordPress 插件，我对此非常满意，但标题仅出现在一些像素之后，并不总是在顶部可见。有谁知道我如何修改代码以使其始
javascript - 粘性 header 锯齿状运动
我目前正在创建一个网站，遇到了一个问题，每当我滚动我的粘性标题时，页面就会跳到下一个元素的底部，有人知道这是为什么吗？我已经尝试更改页面上基本上所有元素的填充，包括横幅、标题、文本本身，甚至 anc
html - 如何使用 CSS 粘性
我创建了一个简单的表格，顶部应该有粘性标题 (TR)。但这不起作用。我该如何修复此代码？谢谢 HELLO hello 5hello 5 hello 5hello 5 HELLO T
javascript - 创建两个不同的标题——粘性/滚动和顶部
使用我当前的代码，当页面加载时，白色条形标题位于顶部。当你滚动时，它会消失，当你滚动到顶部时，白色标题又回来了。所以我取得了一些进步。我想要得到的是当滚动条在顶部时有一个透明的标题:(https://
html - 粘性 header 到相对父级并溢出
我到处都看到这个问题的变体，但似乎没有一个能解决我的问题。我有一个高大的页面，由于内容原因已经有一个 Y 滚动条。部分内容是一个div style="position: relative;"，暂且称之
html - 粘性 header 卡在网站中间
我创建了一个 header ，位置设置为粘性，顶部设置为 0。但是，如果我向下滚动页面，标题会在某个时候停止随页面滚动。我认为这很容易解决，但我太笨了... 我试图删除其他元素，因为我认为它们与标题
jquery - 粘性 header 在断点处留下大空间
我的代码有点卡在粘性 header 上。如果达到 770px 点，标题将缩小。但是当我尝试在浏览器上进行测试时，这会给我带来一些问题。尝试在全尺寸浏览器中加载页面(>770)并将其缩小到(770)，

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 如何获得标题使用表格的响应式粘性标题？