css display: таблица не отображает границы - PullRequest
Новая
       37

css display: таблица не отображает границы

67 голосов
/ 24 августа 2011 
<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 ]

141 голосов
/ 24 августа 2011

Вам нужно добавить 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 голосов
/ 24 августа 2011

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

JSссылка на скрипку

редактировать: я забыл про border-collapse:collapse.Это тоже сработает.

2 голосов
/ 24 августа 2011

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

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

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

РЕДАКТИРОВАТЬ

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...