javascript - 在表格顶部 float 元素？

Question

当 <div>展开后，table也得到扩展。我打算只扩展 <div> , 漂浮在 table 上。我该怎么做？

$(document).ready(function() {
  $("div").click(function() {
    $("div").css({
      "height": "100px"
    });
  });
});

div {
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
  <tr>
    <td>
      <div>click</div>
    </td>
  </tr>
</table>

Answer 1

您只需为您的 div 设置 position:absolute。

参见 CSS Layout - The position Property引用。

$(document).ready(function(){
  $("div").click(function(){
    $("div").css({"height":"100px"});
   });
 });

div{
     background-color:grey;
   }
table tr td{
  height:20px;
  width:20px;
}
div{
  position:absolute;
  top:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
  <tr><td>
    <div>click</div>
  </td>
  <td>
    2
  </td>
  </tr>
  <tr>
    <td>click</td>
  <td>
    2
  </td>
  </tr>
  <tr>
    <td>click</td>
  <td>
    2
  </td>
  </tr>
  <tr><td>
    click
  </td>
  <td>
    2
  </td>
  </tr>
</table>