Question

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; 
}

但是，除非您将 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/

最大的问题是该表不需要是position：absolute，因为它的父级已经是。这会更正表格位置，但边框不正确。解决此问题的最佳方法是将边框放在表本身上，而不是包含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
}

CSS表里面绝对div

3 个答案: