绝对 div 内的 CSS 表格

Question

请参阅 JS Fiddle demo :

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 属性:

border:1px solid red;

所以在你的情况下是:

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

但是，如果您真的希望 div 环绕您的表格，请将位置属性从 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; 
}

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

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