Question

我正在使用用表格创建的日历。点击一个td，我想要一个div来显示。这很简单，但问题是div会比td大，然后它会扩展td的大小。我希望它不会影响td的大小，并且被放在td的顶部（以它的全尺寸）。

HTML：

<table *ngIf="datoer">
        <tr>
            <td 
                *ngFor="let cell of ukeEn()">{{cell.text}}
                <div class="details"> </div>
            </td>            
        </tr>
</table>

CSS：

body {
    font-family: Verdana, sans-serif;
    height: 100%;
    }

table, td, th {
    text-align: left;
    border: 1px solid black;
    vertical-align: text-top;
    padding: 5px;
    }

table {
    height: 100%;
    width: 100%;
}

td {
    width: 14.28%;
    height: 16.6%;
    }

任何？

Answer 1

我会用

相对于你的td

并在你的div上绝对定位

那样当某人悬停在某个td上时，div就会显示

td > div { position: absolute; display: none;} td:hover > div {display: block;}

Codepen example

Answer 2

如果我错了，请纠正我，但如果你试图重叠TD以上的div，你就不能在CSS中为div指定一个更高的z-index而不是TD元素？这似乎是最直接的方式来实现它听起来像你要问的。

Answer 3

我会使用类似下面代码的东西。

基本上，当鼠标输入td时，data属性的内容会被复制到隐藏的div然后显示（相对于光标的位置）

这可以防止在未使用时重复代码（即内部divs）。

请参阅下面的代码（仅周一和周四有数据）。

＆＃13;

$(function() {

  var mouseX;
  var mouseY;
  // keep track of mouse coordinates
  $(document).mousemove(function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
  });

  $('body').on('mouseout', function() {
    $('#hiddenContent').hide();
  });

  $('td').on('mouseover', function() {
    var contentHtml = $(this).data('cal');

    if (contentHtml) { // move hidden div to mouse coordinates
      $('#hiddenContent').css({
        'top': mouseY,
        'left': mouseX
      });

      // add content and toggle
      $('#hiddenContent').text(contentHtml).show();
    }
  });
});

＆＃13;

#hiddenContent {
  display: none;
  z-index: 100;
  border: 5px solid gray;
  width: 300px;
  position: absolute;
  background-color: white;
}
td {
  color: red;
  text-align: center;
  border: 1px solid blue;
}
th {
  border: 1px solid green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<table>
  <tr>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
    <th>Sun</th>
  </tr>
  <tr>
    <td data-cal="on mon we have many things">1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td data-cal="on friday we have many things too">5</td>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

<div id="hiddenContent">
  this is hidden
</div>

＆＃13;

大<div>里面较小

3 个答案: