Содержание

Как полностью удалить границы таблицы HTML

<table cellspacing="0" cellpadding="0">

и в css:

table {border: none;}

EDIT: Как отметил iGEL, это решение официально устарело (все еще работает), поэтому, если вы начинаете с нуля, вы должны пойти с решением пограничного коллапса jnpcl.

мне на самом деле очень не нравится это изменение до сих пор (не работают с таблицами, что часто). Это усложняет некоторые задачи. Е. Г. когда вы хотите включить две разные границы в одном месте (визуально), а один сверху один ряд, а второй снизу для другого ряда. Они рухнут (= будет показан только один из них). Затем вам нужно изучить, как рассчитывается «приоритет» границы и какие стили границы «сильнее» (double vs solid и т. д.).

мне это понравилось:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td>first row</td>
  </tr>
  <tr>
    <td>second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

теперь, с крахом границы, это не будет работать, так как всегда одна граница удалена. Я должен сделать это каким-то другим способом (есть несколько решений, ОФК). Одна из возможностей-использование CSS3 с box-shadow:

<table>
  <tr>
    <td>first row</td>
  </tr>
  <tr>
    <td>second row</td>
  </tr>
</table>​​​

<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​
</style>

вы также можете использовать что-то вроде «groove|ridge|inset|outset» стиль границы только с одной границей. Но для меня это не оптимально, потому что я не могу контролировать оба цвета.

может быть, есть какое-то простое и хорошее решение для коллапса границ, но я еще не видел его, и я честно не потратил на него много времени. Может быть, кто-то здесь сможет показать мне/нам 😉

Убрать границы таблицы css стилей с помощью свойства border

 

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

Именно поэтому в сегодняшней публикации я расскажу, как убрать границы таблицы css-средствами. Это очень простая тема и вы быстро ее освоите. Так что давайте побыстрее приступим к делу!

В каких случаях могут пригодиться знания о прозрачных границах?

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

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

Однако помимо традиционного предназначения таблицы еще используют в верстке. В широких кругах она известна как табличная верстка. Конечно современные и профессиональные сайты отдают предпочтение типу верстки при помощи такого тега html, как div, но это не мешает подавляющему количеству веб-ресурсов создаваться при помощи таблиц с прозрачными границами.

Средства, которые помогут избавиться от границ

За границы в любом элементе языка разметки отвечает свойство border. При чем он может похвастаться своей гибкостью и многофункциональностью. С помощью border-а создаются пунктирные, двойные, объемные и даже состоящие из картинок рамки вокруг объектов.

 

Данное свойство также отвечает за толщину и цвет границ. К тому же можно устанавливать уникальные параметры для каждой стороны отдельно, если конкретно указать часть рамки (например,

border-left). Для полной прозрачности всех границ достаточно написать: border:0.

Программная реализация прозрачных границ

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>Пример 1</title>
<style type="text/css">
body { background: #FA8072; margin:0;}
TABLE {
background: #fff;
width: 90%;
margin: 5% 5% 0 5%;
border-left: 11px double #b0e0e6;
border-right: 11px double #b0e0e6;
}
TD {
padding: 15px;
text-align:center;
}
TH {
background: #b0e0e6;
font-size: 35px;
color:#FA8072;
text-shadow: -3px 1px 9px #A52A2A;
padding: 19px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="4">Журнал моды. Ведущие направления 2016 года</th>
</tr>
<tr>
<td><img src="http://yavmode.ru/wp-content/uploads/2015/11/Ermanno-Scervino.jpg"  alt="lorem"></td>
<td><img src="http://ohfashion.ru/wp-content/uploads/2015/04/Devushka-demonstriruyushhaya-idealnyiy-primer-kostyuma-s-topom-byuste.jpg"  alt="lorem"></td>
<td><img src="http://www.prelest.com/files/styles/insert1000/public/bodyimg/ulichnaya_moda_vesna16_i.jpg?itok=Kj8_4lWw"  alt="lorem"></td>
<td><img src="http://www.prelest.com/files/styles/insert1000/public/bodyimg/ulichnaya_moda_vesna16_l.jpg?itok=C2splJQt"  alt="lorem"></td>
</tr>
<tr>
<td  colspan="4">В текущем году ценятся теплые и яркие цвета, также не остаются в стороне классические и светлые оттенки. Лидером стал минимализм во всем.</td>
</tr>
</table>
</body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=utf-8″> <title>Пример 1</title> <style type=»text/css»> body { background: #FA8072; margin:0;} TABLE { background: #fff; width: 90%; margin: 5% 5% 0 5%; border-left: 11px double #b0e0e6; border-right: 11px double #b0e0e6; } TD { padding: 15px; text-align:center; } TH { background: #b0e0e6; font-size: 35px; color:#FA8072; text-shadow: -3px 1px 9px #A52A2A; padding: 19px; } </style> </head> <body> <table> <tr> <th colspan=»4″>Журнал моды. Ведущие направления 2016 года</th> </tr> <tr> <td><img src=»http://yavmode.ru/wp-content/uploads/2015/11/Ermanno-Scervino.jpg» alt=»lorem»></td> <td><img src=»http://ohfashion.ru/wp-content/uploads/2015/04/Devushka-demonstriruyushhaya-idealnyiy-primer-kostyuma-s-topom-byuste.jpg» alt=»lorem»></td> <td><img src=»http://www.prelest.com/files/styles/insert1000/public/bodyimg/ulichnaya_moda_vesna16_i.jpg?itok=Kj8_4lWw» alt=»lorem»></td> <td><img src=»http://www.prelest.com/files/styles/insert1000/public/bodyimg/ulichnaya_moda_vesna16_l.jpg?itok=C2splJQt» alt=»lorem»></td> </tr> <tr> <td colspan=»4″>В текущем году ценятся теплые и яркие цвета, также не остаются в стороне классические и светлые оттенки. Лидером стал минимализм во всем.</td> </tr> </table> </body> </html>

На этом текущая публикация заканчивается. Надеюсь, она была для вас интересной и познавательной. Не забывайте подписываться на мои обновления, а также буду благодарен, если вы посоветуете мой обучающий блог своим друзьям и единомышленникам. Желаю удачи!

Пока-пока!

С уважением, Роман Чуешов

 

 

Загрузка…

Прочитано: 239 раз

Рамка и отступы таблицы (свойства border-spacing, empty-cells, border-collapse)

Как сделать рамку для таблицы

Вид, толщину, цвет рамки таблицы определяет свойство border. Его можно указать в атрибуте style.

Ячейка Ячейка
Ячейка Ячейка
<table style="border: 1px solid red;">
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Установить рамку каждой ячейке также можно с помощью атрибута style. Но предпочтительней стиль вынести в тег style или файл .css: кода меньше, возможности шире, удобства больше (чтобы изменить цвет рамки у всех ячеек, достаточно поменять значение один раз).

Ячейка Ячейка
Ячейка Ячейка
<table style="border: 1px solid red;">
  <tr>
    <td style="border: 1px solid red;"
>Ячейка <td style="border: 1px solid red;">Ячейка <tr> <td style="border: 1px solid red;">Ячейка <td style="border: 1px solid red;">Ячейка </table> <style> .raz, .raz td { border: 1px solid red; } </style> <table class="raz"> <tr> <td>Ячейка <td>Ячейка <tr> <td>Ячейка <td>Ячейка </table>

Убрать промежутки от ячеек до краёв таблицы

Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка
Ячейка Ячейка
Ячейка
Ячейка Ячейка Ячейка
<style>



.raz {
  border-spacing: 0;
  padding: 0 2em 3em 0;  
}
.raz,
.raz td {
  position: relative;
  border: 1px solid red;
}
.raz td:nth-child(2) {
  left: 1em;
}
.raz td:nth-child(3) {
  left: 2em;  
}
.raz tr:nth-child(2) td {
  top: 1em;
}
.raz tr:nth-child(3) td {
  top: 2em;
}
.raz tr:nth-child(4) td {
  top: 3em;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
</table>

Скрыть пустые ячейки в таблице c border-collapse: collapse; можно с помощью псевдоклассов :empty или :blank.

border-collapse: схлопывание границ ячеек

separate
у каждой ячейки и таблицы в целом своя граница, игнорируется свойство border у thead, tfoot, tbody и tr
collapse
между ячейками и контейнером единая граница, отсутствуют двойные рамки таблицы, игнорируются свойства border-spacing, empty-cells, padding у table
initial
separate
inherit
наследует значение родителя
unset
наследует значение родителя
Ячейка Ячейка
Ячейка Ячейка
<style>
.raz {
  border-collapse: collapse; 
}
.raz,
.raz td {
  border: 1px solid red;
}
.raz tbody,
.raz tr,
.raz td {
  margin: 1em; 
}
.raz tbody,
.raz tr {
  padding: 1em; 
}
</style>

<table>
  <tbody>
    <tr>
      <td>Ячейка
      <td>Ячейка
    <tr>
      <td>Ячейка
      <td>Ячейка
</table>

Жирные внешние границы таблицы

Ячейка Ячейка
Ячейка Ячейка
<style>
.raz {
  border-collapse: collapse;
  border: 4px solid red;
}
.raz td {
  border: 1px solid red;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Таблица без границ аки сетка без внешней рамки

Ячейка Ячейка
Ячейка Ячейка
<style>
.raz {
  border-collapse: collapse;
  border-style: hidden;
}
.raz td {
  border: 1px solid red;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Свойство border у tr

Заголовок Заголовок
Ячейка Ячейка
Ячейка Ячейка
<style>
.raz {
  border-collapse: collapse;
}
.raz tr:first-child {
  border-bottom: 1px solid red;
}
.raz th+th,
.raz td+td {
  padding-left: 1em;  
}
</style>

<table>
  <tr>
    <th>Заголовок
    <th>Заголовок
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Свойство padding у table при border-collapse: collapse;

Ячейка Ячейка
Ячейка Ячейка
<style>
.raz {
  border-collapse: collapse;
  outline: 1px solid red;  
  outline-offset: 2px;
  margin: 3px;  
}
.raz,
.raz td {
  border: 1px solid red;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Отступы внутри ячейки таблицы

Расстояние от содержимого до края ячейки определяет свойство padding.

Ячейка Ячейка
Ячейка Ячейка
<style>
.raz {
  border-collapse: collapse;
}
.raz td {
  border: 1px solid red;
  padding: .3em 1em;  
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

таблицы — как убрать границы ячейки в html

<table cellspacing="0" cellpadding="0">

И в css:

table {border: none;}

EDIT: Как отметил iGEL, это решение официально устарело (все еще работает), поэтому, если вы начинаете с нуля, вы должны пойти с решением по сокращению границ jnpcl.

На самом деле я очень не люблю это изменение (часто не работаю с таблицами). Это усложняет некоторые задачи. Например, если вы хотите включить две разные границы в одном и том же месте (визуально), в то время как один является TOP для одной строки, а второй — BOTTOM для другой строки. Они рухнут (= будет показан только один из них). Затем вам нужно изучить, как рассчитывается «приоритет» границы, и какие стили границы «сильнее» (double vs. solid и т. Д.).

Мне это понравилось:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td>first row</td>
  </tr>
  <tr>
    <td>second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

Теперь, с крахом границы, это не сработает, так как всегда удаляется одна граница. Я должен сделать это каким-то другим способом (есть больше решений ofc). Одна из возможностей заключается в использовании CSS3 с box-shadow:

<table>
  <tr>
    <td>first row</td>
  </tr>
  <tr>
    <td>second row</td>
  </tr>
</table>​​​

<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​
</style>

Вы также можете использовать что-то вроде стиля «groove | ridge | inset | outset» с одной границей. Но для меня это не оптимально, потому что я не могу контролировать оба цвета.

Может быть, есть простое и приятное решение для разваливания границ, но я еще этого не видел, и я честно не потратил на это много времени. Может быть, кто-то здесь сможет показать мне / нам;)

html сделать невидимыми границы таблицы

Я использую Drupal 6 с темой летнее время . Также я использую FCKeditor. Чтобы выровнять содержимое, я хотел создать таблицу с невидимыми границами. Сначала я попробовал FCKEditor свойства таблицы и дал 0 размеру границы, чтобы сделать границы невидимыми. Но это не сработало. Я посмотрел исходный код и неработающий код был как ниже (почему giving border=»0″ не работал?) :

<table cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td>
            <h3><a href="http://mydomain.com/url"><strong>Content </strong></a></h3>
            </td>
            <td><img src="/sites/mydomain.com/files/sample.jpg" alt="" /></td>
        </tr>
    </tbody>
</table> 

Тогда я попробовал:

<table cellspacing="0" cellpadding="0">

Границы таблиц теперь невидимы, но границы ячеек по-прежнему видны. Как я могу сделать его совершенно невидимым? Спасибо.

html drupal Поделиться Источник Gok Demir     02 января 2010 в 20:40

4 Ответов



2

Атрибут границы должен быть указан на уровне ячейки, например <td> . Конечно, это должно быть сделано в CSS с использованием:

table td { border: 0; }

Но я вижу, что в вашем случае это может быть трудно.

Поделиться Tatu Ulmanen     02 января 2010 в 20:48



1

Я просто случайно наткнулся на это, пока искал что-то еще. Это старо, но я подумал, что все равно прокомментирую. Кто-то еще может найти это полезным.

Вместо того, чтобы делать несколько вещей, упомянутых выше, было бы проще просто добавить конкретное имя ID или CLASS к самой таблице, а затем вы могли бы указать настройки только для этой таблицы в CSS.

HTML:

<table ....>

CSS:

#exampleclass tbody,
#exampleclass thead, 
#exampleclass th { 
  border: 0; 
} 

Поделиться agentblue     03 ноября 2010 в 22:37



1

Это должно быть сделано вот так:

<table cellspacing="0" cellpadding="0" border="0">
<tbody>
    <tr>
        <td>
        <h3><a href="http://mydomain.com/url"><strong>Content </strong></a></h3>
        </td>
        <td><img src="/sites/mydomain.com/files/sample.jpg" alt="" /></td>
    </tr>
</tbody>

Поделиться Timo Willemsen     02 января 2010 в 20:50



1

Вероятно, есть границы, установленные в CSS. Drupal core’s system.css устанавливает некоторые границы для заголовков таблиц и тела, которые могут быть болезненными для переопределения.

Вы можете добавить пользовательский файл CSS в тему, чтобы избежать прямого редактирования его CSS. Просто добавьте путь к добавленному файлу .css в файле .info темы.

Затем попробуйте добавить:

tbody,
thead,
thead th,
tr.even,
tr.odd {
  border: 0;
}

Не забудьте отключить агрегацию CSS и очистить кэш.

Поделиться stephthegeek     03 января 2010 в 06:07


Похожие вопросы:


Невидимые границы в таблице html не совсем невидимы?

У меня есть несколько таблиц в моем приложении asp.net MVC для целей макета. Несмотря на то, что я обычно использую divs для большинства вещей, в некоторых случаях таблицы имеют наибольший смысл,…


Как скрыть границы пустой таблицы (HTML, Javascript)

Я хочу полностью удалить таблицу HTML с экрана и по-прежнему иметь возможность добавлять к ней строки позже. У меня есть следующий код, чтобы удалить все строки из таблицы (в основном, он…


Как использовать Javascript, чтобы сделать несколько строк в таблице HTML невидимыми

У меня есть таблица HTML, и в этой таблице есть несколько строк, которые я хочу переключить, чтобы быть видимыми или невидимыми как группа. Поскольку я не могу просто поставить <div> вокруг…


Как сделать границы таблицы невидимыми с помощью CSS

Я знаю, что это часто задаваемый вопрос, но я пробовал некоторые решения (например, как заставить разделительные линии/границы в таблице исчезнуть с CSS? ) но я все еще не могу до конца понять это….


Сделать верхнюю и нижнюю границы таблицы видимыми с помощью CSS

У меня есть таблица с некоторыми строками и столбцами в html, я хочу сделать видимыми только верхнюю и нижнюю границы таблицы. Может ли кто-нибудь посоветовать вам это? Это мой текущий код:…


Сделать внешние элементы невидимыми, html css

У меня есть следующая структура html: <body> <div class=white> <table class=circleDataBack> <tr> <td> <div class=circle>A</div> <div…


Java Swing-как сделать границы JButton невидимыми?

На скриншоте ниже вы можете увидеть четыре кнопки в выбранной области. Я хочу имитировать этот вид кнопок в моем приложении GUI. Каждая из этих кнопок имеет изображение на них (воспроизведение,…


IOS Dev-как сделать эти пустые ячейки таблицы невидимыми?

Как вы можете видеть здесь, у меня есть только 2 данные для тестирования, и они загружаются в виде таблицы . Это хорошо. Но, есть много пустых ячеек, которые также были автоматически сгенерированы….


Как сделать объекты невидимыми при обработке

Я делаю прямоугольники на эскизной доске с помощью обработки, но я хочу сделать их невидимыми. Как мне это сделать? Я был бы признателен вам за помощь. Амрита


Переопределите атрибут границы таблицы HTML

У меня есть таблица с атрибутом Border, установленным в 0, поэтому все, что я установил в таблице css, не показывает границу Обратите внимание, что я не могу изменить атрибут границы таблицы inline….


Таблицы в CSS. Границы таблицы

Отображение границ ячеек

CSS позволяет установть не только стиль границы таблицы, но и стиль границ отдельных ячеек. Так как у каждой ячейки свои границы, то между соседними ячейками граница получается сдвоенная. Но существует возможность объединить границы соседних ячеек в одну. Для этого есть свойство border-collapse. Оно принимает значения:

border-collapse: separate — у каждой ячейки своя граница (по умолчанию)

border-collapse: collapse — общая граница

border-collapse: inherit — значение принимается от родительского элемента

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

Стиль:

+

7
8
9
10

td
  {
  border: 1px solid Red;
  }

HTML код:

14
15
16
17
18
19
20
21
22

<table>
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td>строка 2 ячейка 1</td>
    <td>строка 2 ячейка 2</td>
</tr></table>

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

Теперь установим таблице свойство border-collapse.

11
12
13
14

#t1
  {
  border-collapse: collapse;
  }

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

Расстояние между ячейками

CSS даёт возможность установить конкретное расстояние между ячейками таблицы. Для этого используется свойтсво border-spacing. Значением свойства является расстояние в единицах измерения CSS. Это свойство не работает, если установлено свойство border-collapse со значением collapse.

Создадим ещё одну таблицу и установим расстояние между ячейками:

Стиль:

15
16
17
18

#dis 
  {
  border-spacing: 10px;
  }

HTML код:

31
32
33
34
35
36
37
38
39

<table>
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td>строка 2 ячейка 1</td>
    <td>строка 2 ячейка 2</td>
</tr></table>

Свойству border-spacing можно указать два значения через пробел. При этом, первое значение — это расстояние по горизонтали, а второе — по вертикали.

Укажем созданной таблице разные расстояния. 17 строка будет выглядеть так:

17

border-spacing: 5px 15px;

Положение заголовка таблицы

Для таблицы можно создать заголовок. Он создаётся с помощью тэга <caption>. Свойство caption-side позволяет установить положение заголовка. Оно принимает значения:

caption-side: top — над таблицей (по умолчанию)

caption-side: bottom — под таблицей

Существуют другие значения, но они поддерживаются не всеми браузерами.

Добавим второй таблице заголовок и расположим его под таблицей:

32

<caption>Заголовок таблицы</caption>

Отображение пустых ячеек

Для пустых ячеек можно запретить отображение фона и рамки. Если ячейка содержит пробел, перевод строки или табуляцию, то она всё равно считается пустой. Отмену отображения пустых ячеек устанавливает свойство empty-cells. Может принимать значения:

empty-cells: show — ячейки видны (по умолчанию)

empty-cells: hide — ячейки не видны

Создадим таблицу с пустой ячейкой. Кроме рамки, установим ячейкам фон. Пока не будем ничего менять, посмотрите, как будет выглядеть таблица.

Стиль:

19
20
21
22

#hid td
  {
  background-color: #909090;
  }

HTML код:

45
46
47
48
49
50
51
52
53

<table>
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td></td>
    <td>строка 2 ячейка 2</td>
</tr></table>

Пустая ячейка видна, у неё отображаются рамка и фон.

Теперь добавим таблице свойство empty-cells.

19
20
21
22

#hid 
  {
  empty-cells: hide;
  }

Обратите внимание, пустая ячейка не отображается в таблице

border-collapse | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Значение по умолчанию separate
Наследуется Нет
Применяется К тегу <table> или к элементам, у которых значение display установлено как table или inline-table
Ссылка на спецификацию http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.

а б

Рис. 1. Вид таблицы при использовании свойства border-collapse

Синтаксис

border-collapse: collapse | separate | inherit

Значения

collapse
Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing.
separate
Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-collapse</title>
  <style>
   table { 
    width: 100%; /* Ширина таблицы */
    border: 4px double black; /* Рамка вокруг таблицы */
    border-collapse: collapse; /* Отображать только одинарные линии */
   }
   th { 
    text-align: left; /* Выравнивание по левому краю */
    background: #ccc; /* Цвет фона ячеек */
    padding: 5px; /* Поля вокруг содержимого ячеек */
    border: 1px solid black; /* Граница вокруг ячеек */
   }
   td { 
    padding: 5px; /* Поля вокруг содержимого ячеек */
    border: 1px solid black; /* Граница вокруг ячеек */
   }
  </style>
 </head>
 <body>   
  <table>
   <tr> 
    <th>&nbsp;</th><th>2013</th>
    <th>2014</th><th>2015</th>
   </tr>
   <tr> 
    <td>Нефть</td><td>43</td>
    <td>51</td><td>79</td>
   </tr>
   <tr> 
    <td>Золото</td><td>29</td>
    <td>34</td><td>48</td>
   </tr>
   <tr> 
    <td>Дерево</td><td>38</td>
    <td>57</td><td>36</td>
   </tr>
  </table> 
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Вид таблицы при использовании свойства border-collapse

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit. В IE6 и IE7 не отменяется действие атрибута cellspacing.

html — как удалить границу таблицы?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. работы Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
,

html — Как удалить границу таблицы на одной строке?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. работы Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. реклама Обратитесь к разработчикам и технологам со всего мира
.

css — Удалить границу из ячейки таблицы

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. работы Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании

Загрузка…

.

css — Как удалить границы TD только в первом TR в ТАБЛИЦЕ

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. работы Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании

Загрузка…

,