дисплей css: таблица, не отображающая границу

<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 %
}
62
css css-tables fluid-layout

3 ответов

вам нужно добавить 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>
128

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

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

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

редактировать

согласно комментарию

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

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

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

2

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

JS fiddle link

edit: я забыл о border-collapse:collapse. Это тоже сработает.

2