css - 绝对div内的CSS表

Question

请参阅JS Fiddle 演示：

html:

    <div class="r">
    <div class="e_1">xxx</div>
    <div class="e_2">

        <div class="e_c" >

            <table class="e_c">
                <tr>
                    <td>dsdssdsds</td>
                </tr>
                <tr>
                    <td>ssss</td>
                </tr>
            </table>

        </div>
    </div>
</div>

CSS：

.r {
    position: relative;
}

.e_1 {
    position: absolute;
    top:0;
    bottom:0;
    height: 40px;
    overflow: hidden;
}

.e_2 {
     position: absolute;
    top: 40px;
    bottom: 0px;
    border: 1px solid red;
}

.e_c {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

正如您在代码中看到的（这只是我真实案例的演示），我在div .e_2. 但是当浏览器渲染它时，table它不会显示在.e2元素内部；我想要.e_2 div包装table. 预期的结果是桌子周围有红色边框。

如果不更改 HTML 结构，我该怎么做？

Answer 1

如果您只希望表格有红色边框，请使用边框属性：

border:1px solid red;

所以在你的情况下是：

.e_c {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    border:1px solid red;
}

但是，如果您真的希望 div 环绕您的表格，请将 position 的属性从 e_c 和 e_2 更改为 relative：

.e_2 {
     position: relative;
    top: 40px;
    bottom: 0px;
    border: 1px solid red;
}

.e_c {
    bottom: 0;
    left: 0;
    position: relative;
    right: 0;
    top: 0; 
}

但是，除非您将display属性添加到 .e_2 类，否则这会使 div 扩展到整个宽度：

.e_2 {
    display: inline-block;
    position: relative;
    top: 40px;
    bottom: 0px;
    border: 1px solid red;
}

Answer 2

在此处查看更新的小提琴：http: //jsfiddle.net/designingsean/BeeUY/5/

最大的问题是表不需要是位置：绝对的，因为它的父级已经是。这更正了表格位置，但边界不正确。解决此问题的最佳方法是将边框放在表格本身上，而不是包含 div。

CSS 的受影响部分：

.e_2 {
  position: absolute;
  top: 40px;
  bottom: 0px;  
}

.e_c {
  border: 1px solid red;
}

Answer 3

.e_c table.e_c {
    border:1px solid red
}