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

Содержание

Как полностью удалить границы таблицы 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.

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

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

<!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> </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 — как удалить границу таблицы?
Переполнение стека
Около
Товары
Для команд
Переполнение стека Общественные вопросы и ответы
Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
работы Программирование и связанные с ним технические возможности карьерного роста
Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
реклама Обратитесь к разработчикам и технологам со всего мира
О компании
,
html — Как удалить границу таблицы на одной строке?
Переполнение стека
Около
Товары
Для команд
Переполнение стека Общественные вопросы и ответы
Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
работы Программирование и связанные с ним технические возможности карьерного роста
Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
реклама Обратитесь к разработчикам и технологам со всего мира
.
css — Удалить границу из ячейки таблицы
Переполнение стека
Около
Товары
Для команд
Переполнение стека Общественные вопросы и ответы
Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
работы Программирование и связанные с ним технические возможности карьерного роста
Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
реклама Обратитесь к разработчикам и технологам со всего мира
О компании
Загрузка…
.
css — Как удалить границы TD только в первом TR в ТАБЛИЦЕ
Переполнение стека
Около
Товары
Для команд
Переполнение стека Общественные вопросы и ответы
Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
работы Программирование и связанные с ним технические возможности карьерного роста
Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
реклама Обратитесь к разработчикам и технологам со всего мира
О компании
Загрузка…
,
No related posts.

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

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

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

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

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

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

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

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

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

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

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

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

Свойство `border` у `tr`

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

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

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

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

4 Ответов

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

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

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

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

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

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

border-collapse | htmlbook.ru

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

Версии CSS

Описание

Синтаксис

Значения

Браузеры

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

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

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

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

Добавить комментарий Отменить ответ

Рубрики

Рубрики

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

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

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

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

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

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

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

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

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

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

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

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

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

Свойство border у tr

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

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

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

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

4 Ответов

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

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

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

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

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

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

border-collapse | htmlbook.ru

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

Версии CSS

Описание

Синтаксис

Значения

Браузеры

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

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

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

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

Добавить комментарий Отменить ответ

Рубрики

Рубрики

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

Свойство `border` у `tr`

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