Question

我有这种HTML代码：

＆＃13;

<table>
   <tr>
      <td>
         <div>
            <input id="myinput" type="text">  
            <table>
               <tr style="display: none;" >
                  <td>
                     hidden row 1
                  </td>
               </tr>
               <tr style="display: none;" >
                  <td>
                     hidden row 2
                  </td>
               </tr>
               <tr style="display: none;" >
                  <td>
                     hidden row 3
                  </td>
               </tr>
            </table>
         </div>
      </td>
   </tr>
   <tr>
      <td>
         I want you to stay fixed
      </td>
   </tr>
</table>

＆＃13;

当我以编程方式取消隐藏行时，最后一行（我希望你保持固定）向下移动，我希望该行不要向下移动。我也在实际代码中取消隐藏最多3行。那么如何修改我的代码，那行就不会移动了。感谢。

Answer 1

我正在使用CSS可见性属性来执行此操作。

div.style.visibility="visible";

我希望它对你有用。

Here is my sample code

Answer 2

我编辑了你的代码试试这个

<style>
#myiput{
position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
}
</style>
    <table>
       <tr>
          <td>
             <div>
                <input id="myinput" type="text">  
                <table>
                   <tr style="display: none;" >
                      <td>
                         hidden row 1
                      </td>
                   </tr>
                   <tr style="display: none;" >
                      <td>
                         hidden row 2
                      </td>
                   </tr>
                   <tr style="display: none;" >
                      <td>
                         hidden row 3
                      </td>
                   </tr>
                </table>
             </div>
          </td>
       </tr>
       <tr>
          <td>
             I want you to stay fixed
          </td>
       </tr>
    </table>

如何修复div

2 个答案: