Як я можу застосувати рамку лише всередині таблиці?

195

Я намагаюся з'ясувати, як додати межу лише всередині таблиці. Коли я роблю:

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;
}

— Річард Ноп
джерело

Я бачу лише межі лише навколо клітин. Оскільки кожна з комірок має межу, виявляється, що таблиця має рамку. Можливо, я не розумію цього питання?

— Chetan S

3

Також називають внутрішні кордони .

— Механічний равлик

203

Якщо ви робите те, що я вважаю, що ви намагаєтеся зробити, вам знадобиться щось трохи більше, як це:

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

Проблема полягає в тому, що ви встановлюєте "повну межу" навколо всіх комірок, завдяки чому вони виглядають так, ніби у вас є межа навколо всієї таблиці.

Ура.

EDIT: Трохи більше інформації про ці псевдокласи можна знайти на quirksmode , і, як і слід було очікувати, ви досить багато SOL з точки зору підтримки IE.

— theIV
джерело

У таких простих таблицях є набагато коротше рішення, яке не дозволяє використовувати псевдокласи, використовуючи наступний комбінатор побратимів. Дивіться мою відповідь.

— далгард

1

@theIV, на це відповіли 5+ років тому, чи існує який-небудь "новий" / "більш ефективний" спосіб цього?

— jbutler483

Не працює, якщо ви коли-небудь використовувати рядковий шпат у першому стовпчику таблиці.

— Джек

192

це працює для мене:

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

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

переглянути приклад ...

перевірена на FF 3.6 та Chromium 5.0, IE не має підтримки; від W3C :

Кордони з "прихованим" прикордонним "мають перевагу перед усіма іншими конфліктуючими кордонами. Будь-яка межа з цим значенням придушує всі межі в цьому місці.

— антонірінгер
джерело

1

Поки вам не потрібна рамка столу, це, безумовно, найелегантніше рішення.

— cjroth

42

Приклад дуже простого способу досягнення бажаного ефекту:

<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>

— Джоні
джерело

13

ПОЯСНЕНО "MAGIC": frame і rulesє АТРИЧНІ (не HTML5) table атрибути (замість цього слід використовувати CSS). frameкаже, які частини зовнішніх меж таблиці повинні бути видимими - voidозначає приховати всі зовнішні межі таблиці. rulesкаже, які частини внутрішніх меж таблиці повинні бути видимими - allозначає всі вони ... очевидно ... Будь ласка, не використовуйте це, якщо ви не є HTML3 fanatic ... :)

— jave.web

1

Додаючи щось на зразок облямівки: суцільний чорний піксель розміром 1 пікселя забезпечить межу зовнішньої межі таблиці.

— Аарон Лю

1

Працював як шарм у 2020 році, щоб швидко додати трохи читабельності до смішно розташованої таблиці на веб-сайті, який я читав. Власне, цього лише було достатньо для внутрішніх кордонів: правила = "всі"

— Едоардо Фаччінеллі,

11

Через сумісність гною з ie7, тобто 8, я пропоную використовувати це для першої дитини, а не для останньої дитини:

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

— Крісбот
джерело

Це чудове рішення. Але будьте обережні, якщо у вас є інша таблиця в одній із комірок таблиці та ви хочете побачити внутрішні межі, вам потрібен інший набір CSS-рядків для вашої "внутрішньої" таблиці

— Michael Biermann,

10

Для звичайної розмітки таблиці, ось коротке рішення, яке працює на всіх пристроях / браузерах на 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

— далгард
джерело

Чудово - оскільки це також дозволяє встановити інший кордон столу, більш ніж реєструвати його.

— jsbueno

5

це має працювати:

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

це зробить все без css <TABLE BORDER=1 RULES=ALL FRAME=VOID>

код від: Навчальний посібник з HTML- кодом

— TwoFaceZ
джерело

0

Додайте рамку до кожної комірки за допомогою цього:

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/

— Брайан
джерело

0

Працює для будь-якої комбінації 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>

Розгорніть фрагмент

— користувач1119279
джерело