Вопросы Теги

css display: таблица, не отображающая границу 

<html>
    <style type="text/css">
        .table   { display: table;}
        .tablerow  { display: table-row; border:1px solid black;}
        .tablecell { display: table-cell; }
    </style>
    <div class="table">
        <div class="tablerow">
            <div class="tablecell">Hello</div>
            <div class="tablecell">world</div>
        </div>
        <div class="tablerow">
            <div class="tablecell">foo</div>
            <div class="tablecell">bar</div>
        </div>
    </div>
</html>

По моему мнению, черная рамка должна быть нарисована на каждой из строк, которые я указал через класс tablerow. Но граница не появляется.

И я хотел изменить высоту строки. Если я укажу его с помощью 'px' - это сработает. Но если я поставлю его с% - не будет работать. Я пробовал следующее 

.tablerow  { 
    display: table-row;
    border:1px solid black;
    position: relative; //not affecting anything and the border disappears!! 
    //position: absolute; // if this is set,the rows overlaps and the border works
    height: 40%; // works only if specified in px and not in %
}

Что-то идет не так, но я не могу понять где. Пожалуйста, помогите!

69
задан FunctionR 21 July 2014 в 05:03
поделиться