border-width — ширина рамки | CSS справочник
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство border-width задает ширину рамки для элемента. Можно использовать от 1 до 4 значений. Ширина устанавливается начиная с верхней позиции. Если задано два значения ширины подряд, это значит первое значение для верхней и нижней границы, второе значение для правой и левой границы.
- border-width:thin medium thick 10px;
- Верхняя граница — тонкая
- Правая граница — средняя
- Нижняя граница — толстая
- Левая граница — 10px
- border-width:thin medium thick;
- Правая и левая границы — средние
- Нижняя граница — толстая
- border-width:thin medium;
- Верхняя и нижняя границы — тонкие
- Правая и левая границы — средние
- border-width:thin;
- Все четыре границы — тонкие
| Значение по умолчанию: | medium |
|---|---|
| Применяется: | ко всем элементам, а также к псевдо-элементу ::first-letter |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object. style.borderWidth=»thin thick» |
Синтаксис
border-width: medium|thin|thick|ширина|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| thin | Тонкая граница рамки. |
| medium | Средняя граница рамки. |
| thick | Толстая граница рамки. |
| ширина | Позволяет определить ширину рамки в единицах измерения, используемых в CSS. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
border-width:
thin
medium
thick
1px
7px
11px
1px 5px 10px 20px
10px 2px
div {
border-style: solid;
border-width: thin;
}
Свойство width служит для задания ширины элемента. Значения: auto — определяется браузером. num — число с единицами измерения. Пример: .p { width : 50%; } Свойство min-width определяет минимально возможную ширину элемента. Значения: auto — определяется браузером. num — число с единицами измерения. Пример: .p { min-width : 200px; } Свойство max-width определяет максимально возможную ширину элемента. Значения: auto — определяется браузером. num — число с единицами измерения. Пример: .p { max-width : 600px; } Свойство height служит для задания высоты элемента. Значения: auto — определяется браузером. num — число с единицами измерения. Пример: .p { height : 400px; } Свойство min-height определяет минимально возможную высоту элемента. Значения: auto — определяется браузером. num — число с единицами измерения. Пример: . Свойство max-height определяет максимально возможную высоту элемента. Значения: auto — определяется браузером. num — число с единицами измерения. Пример: .p { max-height : 700px; } Свойство border-width служит для задания толщины рамки вокруг элемента. Значения: thin — тонкая рамка. medium — средняя рамка. thick — тонкая широкая. num — числовое значетие. Пример: .p { border-width : thin; } Существует возможность задания ширины для отдельной границы рамки: Значения: thin — тонкая рамка. medium — средняя рамка. thick — тонкая широкая. num — числовое значетие. Пример: .p { border-bottom-width : thick; } Свойство border-color служит для задания цвета рамки вокруг элемента. Значения: #num — указывается цвет рамки. Пример: .p { border-color : #00FF99; } Существует возможность задания цвета для отдельной границы рамки: Значения: #num — указывается цвет рамки. Пример: .p { border-bottom-color : #00FF00; } Свойство border-style служит для задания вида рамки вокруг элемента. Значения: none — рамка не показана. hidden — рамка не показана. dotted — рамка из точек. dashed — пунктирная рамка. solid — сплошная рамка. double — двойная рамка. groove — двугранная рамка. ridge — такая же, как groove, но светлая и темная грани расположены иначе. inset — одна грань, наклоненная внутрь. outset — такая же, как inset, но свет падает по-другому. Пример: .p { border-style : dotted; } Существует возможность задания вида для отдельной границы рамки: Значения: none — рамка не показана. hidden — рамка не показана. dotted — рамка из точек. dashed — пунктирная рамка. solid — сплошная рамка. double — двойная рамка. groove — двугранная рамка. ridge — такая же, как groove, но светлая и темная грани расположены иначе. inset — одна грань, наклоненная внутрь. outset — такая же, как inset, но свет падает по-другому. Пример: .p { border-bottom-style : outset; } Существует возможность задания всех свойств для отдельной границы рамки: Порядок свойств строго как в примере! Пример: .p { border-left : 2px dashed #009999; } Свойство border служит для задания всех свойств для всей рамки вокруг элемента. Порядок свойств строго как в примере! Пример: .p { border : 2px solid #006666; } | |
p { min-height : 200px; }
css — граница таблицы HTML не исчезнет
спросил
Изменено 2 года, 7 месяцев назад
Просмотрено 1к раз
У меня есть таблица HTML без идентификатора или определения класса, и я пытаюсь сделать ее без границ.
Я вставляю таблицу на страницу, которая вызывает другие таблицы стилей, которые могут иметь определения для таблиц, но я добавляю следующее прямо перед таблицей, которая должна удалить все предыдущие возможные классы:
стол, й, тр, тд {
граница: 0px;!важно
граница-коллапс: коллапс;!важно
граница:нет;!важно
схема:нет;!важно
}
а граница таблицы не исчезает… как с этим справиться?
- HTML
- CSS
- HTML-таблица
3
Ваш код почти правильный. У вас должен быть тег !important перед точкой с запятой. Не после этого.
Пример:
таблица, th, tr, td {
граница: 0px !важно;
граница-коллапс: коллапс !важно;
граница:нет !важно;
схема:нет !важно;
}
Это избавит от рамки, но также обратите внимание, что элементы td и th также имеют отступы 1px по умолчанию.
Итак, padding: 0px !important; в приведенном выше примере кода удалит его.
2
Попробуйте !важное ключевое слово перед точкой с запятой.
стол, й, тр, тд {
граница: нет !важно;
схема: нет !важно;
};
0
В зависимости от того, как построено ваше приложение (в основном с точки зрения порядка CSS), вам может даже не понадобиться
Прямо сейчас ваш CSS содержит синтаксические ошибки. Твоя точка с запятой не на месте. Точка с запятой используется для закрытия аргументов и поэтому должна стоять в конце строки.
Вот как должен выглядеть ваш CSS:
table, th, tr, td {
граница: 0px !важно;
граница-коллапс: коллапс !важно;
граница:нет !важно;
схема:нет !важно;
}
1
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через FacebookЗарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Граница таблицы HTML
html5 месяцев назад
от Ayesha Sajid
«Граница таблицы определяет границы таблицы, за которые вы не можете расширить эту таблицу.
В HTML вы можете создавать различные типы границ для ваших таблиц, чтобы сделать их более привлекательными. В этом руководстве мы научим вас основам создания границ таблицы в HTML на нескольких примерах».
В HTML доступны различные виды границ таблиц. Вы можете использовать эти границы по своему выбору. Однако в трех приведенных ниже примерах мы поделимся с вами методами создания трех наиболее часто используемых границ таблицы в HTML.
Пример 1. Создание границы свернутой таблицыГраница свернутой таблицы — это граница, в которой границы всех ячеек таблицы схлопываются и сливаются в одну сплошную границу. В этом примере мы покажем вам, как вы можете создать свернутую границу таблицы в HTML, используя следующий HTML-скрипт:
В этом примере мы создали таблицу в HTML с помощью тега table. Для этой таблицы мы выбрали сплошную черную рамку в 1 пиксель, а также выбрали эту рамку свернутой, т.
е. все ячейки таблицы будут иметь одну и ту же рамку. Затем мы хотели, чтобы в этой таблице было два разных столбца, а именно «Сотрудник» и «Назначение», и мы хотели, чтобы в этой таблице были записи двух разных сотрудников. Поэтому мы упомянули имена этих сотрудников и их соответствующие обозначения в отдельных HTML-тегах «tr» и «td».
Когда мы выполнили вышеупомянутый HTML-скрипт, наша таблица со свернутой рамкой появилась на веб-странице, как показано на изображении ниже:
Пример 2: Создание невидимой границы таблицыНевидимая граница таблицы это тот, в котором мы выбираем цвет фона для всех ячеек нашей таблицы, сохраняя при этом цвет границы таблицы как «белый», из-за чего кажется, что наша таблица не имеет границ. Чтобы создать такую таблицу в HTML, вам нужно будет использовать следующий HTML-скрипт:
В этом сценарии мы установили белый цвет границы таблицы, чтобы она казалась невидимой. Затем мы выбрали случайный цвет фона для всех ячеек нашей таблицы.
После этого мы использовали те же записи таблицы, что и в нашем первом примере.
Теперь, когда мы выполнили этот HTML-скрипт, наша таблица с невидимой рамкой появилась на веб-странице, как показано на изображении ниже:
Пример 3: Создание пунктирной границы таблицыКак следует из названия, пунктирная граница таблицы — это граница, имеющая форму точек, а не сплошная. Чтобы создать такую таблицу в HTML, вам нужно будет обратиться к следующему сценарию:
В этом примере сценария мы выбрали пунктирную границу для нашей таблицы. После этого остальные записи таблицы точно такие же, как те, которые мы использовали в наших первых двух примерах.
После выполнения этот HTML-скрипт отобразил на веб-странице таблицу с пунктирной рамкой, как показано на рисунке ниже:
Заключение Это руководство было создано для демонстрации использования и создания границ таблицы в HTML. Чтобы объяснить вам это подробно, мы говорили о трех различных видах границ таблиц в HTML.