CSS – Как полностью удалить границы из таблицы HTML
html2 недели назад
от Sharqa Hameed
Таблица является основным компонентом HTML-страницы, используемой для хранения и организации данных. Разработчики могут создавать таблицы HTML, используя свойства CSS, такие как цвет фона, границы, поля, отступы и т. д. Свойство CSS « border » используется для установки границ вокруг таблиц и ячеек. Но в некоторых сценариях пользователям не требуется граница для оформления.
В этом посте объясняется, как полностью удалить границы из HTML с помощью CSS.
Как полностью удалить границы из таблицы HTML?Если пользователи хотят полностью удалить границы из HTML-таблицы, см. инструкции.
Шаг 1. Создание таблицы с рамкойЧтобы создать таблицу в формате HTML, следуйте инструкциям:
- Сначала добавьте элемент таблицы «
» вместе с « border 9». 0008 ”атрибут.
- Затем добавляется тег «
», чтобы создать нужное количество строк. - Ячейки заголовков указываются с помощью тегов «
- После этого теги «
» включаются в другие теги « » для добавления ячеек данных: Имя ID Категория Дженни 001 А Хафси 002 B Мари 003 C Для оформления таблицы HTML мы будем использовать следующие свойства CSS:
Внутри тега «» откройте элемент
с помощью его тега.Затем примените следующие свойства:
- Свойство «margin » со значением «auto » используется для установки одинакового пространства вокруг элемента.
- Свойство « padding » со значением « 10px » задает пространство в 10 пикселей вокруг содержимого элемента. Свойство
- « border » применяет границу вокруг таблицы.
Выход
Шаг 2:Удалить границу в CSSЧтобы удалить границу из таблицы,пользователи обязаны установить свойство «» как «Нет »:
таблица{
заполнение:10px;
поле:авто;
граница:нет;
}
Видно,что внешняя граница таблицы успешно удалена:
Шаг 3:Полностью удалить границу таблицыКроме того,если вы хотите удалить всю границу из таблицы,а также из ячеек,установите свойство «border » как «none » для всех элементов,включая «table »,«tr »,«th » и «td »:
table,tr,td,th{
padding:10px;
поле:авто;
граница:нет;
}
Вывод ниже показывает,что мы полностью удалили границу из таблицы HTML:
Мы продемонстрировали метод полного удаления границ из таблиц HTML.
ЗаключениеЧтобы полностью убрать границу с таблицы HTML,сначала создайте таблицу. После этого примените к таблице свойства CSS «border »,«padding » и «margin ». Затем установите свойство границы как «none » для всех элементов таблицы,таких как «table »,«tr »,«td » и «-й ». В этом руководстве продемонстрирован метод полного удаления границы из таблицы HTML.
Об авторе
Sharqa Hameed
Я энтузиаст Linux,я люблю читать каждый блог Linux в Интернете. У меня есть степень магистра в области компьютерных наук,и я увлечен обучением и преподаванием.
Посмотреть все сообщения
Как скрыть границу ячейки? - HTML и CSS - Форумы SitePoint
amy_damnit
#1
У меня есть таблица с объединенными строками,а также с обычными неслитными строками/ячейками.
Я установил этот стиль…
тд{поле:0px;отступ:5px;граница:1px сплошная gray;выравнивание текста:по левому краю}
для простоты.
Как указать CSS «стереть» внутренние границы блока из 3 объединенных строк,чтобы осталась только внешняя граница?
Я пытался…
граница:0px сплошная #808080;
,но это не сработало.
Эми
РайанРиз
#2
граница-коллапс:коллапс;
amy_damnit
#3
Райан,
РайанРиз:
граница-коллапс:коллапс;
Это не сработает.
(Это было бы намного проще,если бы вы могли видеть…)
У меня есть 3 строки,но мне нужна только внешняя граница. Таким образом,граница между строками № 1 и строками № 2 должна исчезнуть,а граница между строками № 2 и строками № 3 должна исчезнуть. Но мне все еще нужна внешняя граница.
Поймите,что эти «3 строки» являются подмножеством большей таблицы…
Если я правильно помню,все «граница-коллапс:коллапс;» делает,чтобы свернуть границы в единую границу,когда это возможно.
Эми
кохутек
#4
Примерно так должно работать.
http://rockatee.com/temp/table-borders.html
<таблица>
Ячейка таблицы с границами Ячейка таблицы с границами Ячейка таблицы с границами Ячейка таблицы без границ Ячейка таблицы без границ Ячейка таблицы без границ таблица>Ячейка таблицы без границ Ячейка таблицы без границ Ячейка таблицы без границ таблица{граница коллапса:коллапс;поле:100 пикселей авто}тд{поле:0px;отступ:5px;выравнивание текста:по левому краю;граница:1px сплошная #080808}.граница{граница:1px сплошная #080808}.noborders тд{граница:0}
ральф
#5
Если вам просто нужна рамка вокруг всей таблицы,но не вокруг ячеек,это тоже сработает:
таблица{граница:1px сплошная gray}тд{граница:0}
amy_damnit
#6
Кохоутек:
Примерно так должно работать.
http://rockatee.com/temp/table-borders.html
<таблица>
Ячейка таблицы с границами Ячейка таблицы с границами Ячейка таблицы с границами Ячейка таблицы без границ Ячейка таблицы без границ Ячейка таблицы без границ таблица>Ячейка таблицы без границ Ячейка таблицы без границ Ячейка таблицы без границ таблица{граница коллапса:коллапс;поле:100 пикселей авто}тд{поле:0px;отступ:5px;выравнивание текста:по левому краю;граница:1px сплошная #080808}.граница{граница:1px сплошная #080808}.noborders тд{граница:0}
Спасибо,Малейка,как раз вовремя!!! :tup:
Мне потребовалось довольно много времени,чтобы понять,как все работает,и более того,где мой код был немного неправильным,но мой конечный результат выглядит великолепно.
Надеюсь,вы скоро его увидите.
Эми
amy_damnit
#7
ральф_м:
Если вам просто нужна рамка вокруг всей таблицы,но не вокруг ячеек,это тоже сработает:
Таблица{граница:1px сплошная gray}тд{граница:0}
Ральф,
Да,я уже знал это,но все равно спасибо за предложение.
Эми
P.S. Однако вам не нужна часть «td{border:0}».
РайанРиз
#8
amy_damnit:
Райан,
Это не сработает.…
Если я правильно помню,все «border-collapse:collapse;» делает,чтобы свернуть границы в единую границу,когда это возможно.
Эми
Я исходил из предположения,что между ячейками установлена граница только в 1 пиксель,поэтому я предложил свернуть границы. Прости за это
amy_damnit
#9
РайанРиз:
Я исходил из предположения,что между ячейками установлена граница только в 1 пиксель,поэтому я предложил свернуть границы.
Нет проблем.
Это недостаток,когда мы застряли на текстовом общении!
Через несколько дней у меня должна быть учетная запись веб-хостинга,и тогда я смогу публиковать красивые картинки/скриншоты/реальные веб-страницы,чтобы вы могли видеть,когда я буду задавать вопросы,что должно очень помочь!
Спасибо,
Эми
РайанРиз
#10
amy_damnit:
Нет проблем.
Это недостаток,когда мы застряли на текстовом общении!
Через несколько дней у меня должна быть учетная запись веб-хостинга,и тогда я смогу публиковать красивые картинки/скриншоты/реальные веб-страницы,чтобы вы могли видеть,когда я буду задавать вопросы,что должно очень помочь!
Спасибо,
Эми
Скриншоты можно загружать на flickr или photobucket :).
- Затем добавляется тег «