CSS таблицы внутри абсолютного DIV

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_2div обернул 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 для обертывания вокруг таблицы измените свойство позиции от e_c и e_2 до относительного:

.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 распространяется на всю ширину, если вы не добавите свойство дисплей к классу .e_2:

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