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" - она работает. Но если я дам ей% - wont work.I пробовал следующее

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

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

Ответ 1

Вам нужно добавить border-collapse: collapse; в класс .table, чтобы он работал следующим образом:

<html>
<style type="text/css">
    .table   { display: table; border-collapse: collapse;}
    .tablerow  { display: table-row; border: 1px solid #000;}
    .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>

Ответ 2

Вам нужно добавить border в класс tablecell.

Кроме того, чтобы он выглядел хорошо, вам нужно добавить border-collapse:collapse; в класс таблицы.

Пример: http://jsfiddle.net/jasongennaro/4bvc2/

ИЗМЕНИТЬ

В соответствии с комментарием

Я применяю границу к div, она должна отображаться правильно?

Да, но как только вы установите его как table, как это будет действовать... как table, вам нужно будет следовать правилам CSS для отображения таблиц.

Если вам нужно установить border только в строках, используйте border-top и border-bottom, а затем установите определенные классы для самых левых и правых ячеек.

Ответ 3

Строки таблицы не могут иметь атрибут border. Вы можете получить границу вокруг каждой строки, предоставив всем ячейкам верхнюю и нижнюю границу и добавив класс для самых левых и самых правых ячеек с левой и правой границей соответственно.

ссылка для скрипта JS

edit: Я забыл о border-collapse:collapse. Это тоже будет работать.