CSS - граница только внутри таблицы - PullRequest
Новая
       14

CSS - граница только внутри таблицы

184 голосов
/ 11 августа 2009

Я пытаюсь выяснить, как добавить границу только внутри таблицы. Когда я делаю: 

table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}

Граница вокруг всей таблицы, а также между ячейками таблицы. Чего я хочу добиться, так это иметь рамку только внутри таблицы вокруг ячеек таблицы (без внешней границы вокруг таблицы).

Вот разметка, которую я использую для таблиц (хотя я думаю, что это не важно): 

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

А вот несколько основных стилей, которые я применяю к большинству моих таблиц: 

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Ответы [ 9 ]

193 голосов
/ 11 августа 2009

Если вы делаете то, что, как я считаю, вы пытаетесь сделать, вам понадобится что-то более похожее на это: 

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

jsFiddle Demo

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

Приветствие.

РЕДАКТИРОВАТЬ: немного больше информации об этих псевдоклассах можно найти в quirksmode , и, как и следовало ожидать, вы в значительной степени S.O.L. с точки зрения поддержки IE.

181 голосов
/ 28 июля 2010

это работает для меня: 

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

посмотреть пример ...

протестировано в FF 3.6 и Chromium 5.0, IE не поддерживает; от W3C :

Границы с «пограничным стилем» «скрытого» имеют приоритет над всеми другими конфликтующими границами. Любая граница с этим значением подавляет все границы в этом месте.

40 голосов
/ 07 декабря 2011

Пример очень простого способа достижения желаемого эффекта: 

<table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>
11 голосов
/ 05 октября 2010

В связи с совместимостью с ie7, ie8, я предлагаю использовать для этого первый-не-последний-ребенок: 

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}

table tr td:first-child{border-left:0;}

table tr:first-child td{border-top:0;}

Псевдоклассы CSS 2.1 можно узнать по адресу: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

10 голосов
/ 31 августа 2014

Для обычной разметки таблиц, вот краткое решение, которое работает на всех устройствах / браузерах в BrowserStack, кроме IE 7 и ниже: 

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

Для поддержки IE 7 добавьте: 

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

Тестовый пример можно увидеть здесь: http://codepen.io/dalgard/pen/wmcdE

5 голосов
/ 11 августа 2009

это должно работать: 

table {
 border:0;
}

table td, table th {
    border: 1px solid black;
    border-collapse: collapse;
}

редактирование:

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

это тестовый файл: 

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}


</style>
</head>
<body>
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

</body>
</html>
3 голосов
/ 09 ноября 2012

это все сделает без CSS <TABLE BORDER=1 RULES=ALL FRAME=VOID>

код от: Учебник HTML-кода

0 голосов
/ 22 июня 2019

Работает для любой комбинации tbody / thead / tfoot и td / th 

table.inner-border {
    border-collapse: collapse;
    border-spacing: 0;
}

table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
    border-right: 0;
}

table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
    border-bottom: 0;
}
<table class="inner-border">
    <thead>
    <tr>
        <th>head1,1</th>
        <td>head1,2</td>
        <td>head1,3</td>
    </tr>
    <tr>
        <td>head2,1</td>
        <td>head2,2</td>
        <th>head2,3</th>
    </tr>
    </thead>
    <tr>
        <td>1,1</td>
        <th>1,2</th>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
        <td>3,3</td>
    </tr>
    <thead>
    <tr>
        <th>foot1,1</th>
        <td>foot1,2</td>
        <td>foot1,3</td>
    </tr>
    <tr>
        <td>foot2,1</td>
        <th>foot2,2</th>
        <th>foot2,3</th>
    </tr>
    </thead>
</table>
0 голосов
/ 06 января 2015

Добавьте границу к каждой ячейке следующим образом: 

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

Удалить верхнюю границу со всех ячеек в первом ряду: 

table > tbody > tr:first-child > td { border-top: 0; }

Удалите левую границу из ячеек в первом столбце: 

table > tbody > tr > td:first-child { border-left: 0; }

Удалить правую границу из ячеек в последнем столбце: 

table > tbody > tr > td:last-child { border-right: 0; }

Удалить нижнюю границу из ячеек в последнем ряду: 

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/

...