如何在简单的html表td上直接覆盖简单的div? [英] How to overlay a simple div directly on top of a simple html table td?

问题描述

我有一个简单的html表，其中每个tr都有一个用于标签的td和一个用于内容的td.我正在寻找最正确/最有效的方法来在"content td"的顶部绘制一个div，使标签可见.如果可能的话，计划是使第二个td被覆盖层隐藏". (如果有任何帮助，我会在页面上包含引导程序3)

I have a simple html table where each tr has a td for a label and a td for content. I'm looking for the most correct / efficient way to draw a div over the top of the "content td" leaving the label visible. The plan is to make the second td "hidden" by the overlay if possible. (I've got bootstrap 3 included on the page if that helps in any way)

提前谢谢

<tbody>
  <tr>
    <td>My Label</td>
    <td>Overlay some div on top of this element</td>
  </tr>
</tbody>

推荐答案

为什么不将div插入内容td并使用绝对位置.像这样: http://jsfiddle.net/8RuZe/

Why don't you insert a div into the content td and use position absolute. Like this: http://jsfiddle.net/8RuZe/

td.content {
    position: relative;
}
div.over {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
}

我已经在从IE8到IE11的所有主流浏览器上测试了此方法.

I've tested this method on all major browsers from IE8 to IE11.

祝你好运.

这篇关于如何在简单的html表td上直接覆盖简单的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！