Question

我正在开发一个html表，在那里我使用jQuery显示有关行的更多信息。

以下是我如何做的一个例子： http://jsfiddle.net/rMXAp/7/

通过将不透明度设置为0，jQuery基本上淡化了有问题的行，并添加了包含以下div的叠加层：

<div id="divOverlay" style=""><p>This is the overlay div.</p><p id="info"></p></div>

然后jQuery根据tr /行的“desc”属性设置div文本。

当我将鼠标悬停在表格行上时，我遇到的问题在于显示的文本（在div中）代替表格行。

我尝试过的事情。

“垂直对齐：中部;”对于tr元素，以及div。
“min-height：10em;”为div。
“position：absolute; top：50％;”为div。

我无法将div的“display”属性设置为除none以外的任何其他属性，否则它将显示在表格下方（请参阅jsfiddle）。

我知道垂直对齐有很多问题，但鉴于我使用jQuery显示div，并动态设置html，它们会以相同的方式使用吗？或者怎么样？

我感觉我在这里完全错过了一些东西......

Answer 1

啊......真正对齐...... 我认为最好的方法是使用table-cell显示。

问题是，为display:table-cell;正常工作，家长必须display:table;

所以我建议这样的事情：

HTML

<div id="divOverlay">
   <div class="content" style="display:table-cell;vertical-align:middle;">
   </div> <!-- the content div will hold the content -->
</div>

使用Javascript：

// inside onmouseover...
$divOverlay.css({
        position: 'absolute',
        display: 'table', //set parent's display to table
        ....
    }); 
    //set the html to the child content holder
    $divOverlay.find(".content").html($(this).closest('tr').attr('desc'));

看看这个jfiddle： http://jsfiddle.net/SpacePineapple/4T42H/

Answer 2

我猜你将“desc”数据的内容保持在一个范围内没有任何问题。

使用了line-height:normal and vertical-align:middle并且添加了line-height for div.

编辑你的小提琴here

如果你想要别的东西，请告诉我。

修改

如果您不想更改“desc”的内容，那么您可以实现this too.

$divOverlay.html("<span style='vertical-align:middle;display:inline-block;line-height:normal'>"+$(this).closest('tr').attr('desc')+"</span>");

垂直对齐div内容，在mouseover上替换tr元素（使用jQuery）

2 个答案: