在表顶部浮动<div>元素？

Question

展开<div>后，table也会展开。我打算只扩展<div>，将其浮动在桌面上。我怎么能这样做？

＆＃13;

＆＃13;

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

＆＃13;

div {
  background-color: grey;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>