отображение 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 %
}

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

3 62
css fluid-layout css-tables

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/

EDIT

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

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

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

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

2

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

JS fiddle link

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

2