Css border td: CSS Table Size (Width and Height)

Содержание

html — Применение границ ячеек таблицы

спросил 10 лет, 11 месяцев назад

Изменено 2 года, 7 месяцев назад

Просмотрено 94k раз

У меня есть таблица HTML с классом «productsTable». Я хочу дать каждой ячейке в таблице границу. Теперь я попробовал следующее в своей таблице стилей, но ни один из двух не работает. Что я делаю не так? Спасибо

 тд.товарыТаблица
{
    граница: 1px с точкой #999999;
}
.productsTable тд
{
    граница: 1px с точкой #999999;
}

HTML:

 

Мы предлагаем:
электронный телефон БЕСПЛАТНО
Личное
Профессиональная АТС


Цены
БЕСПЛАТНО
3 фунта стерлингов в месяц 
От 5 фунтов стерлингов в месяц

HTML
CSS

td. productsTable не будет работать , потому что у вас нет элементов с классом productsTable .

Однако ваше второе правило CSS, .productsTable td , это будет работать , потому что у вас есть элементов , у которых есть родительский элемент с классом productsTable .

Я быстро сделал это, и вы видите, что он работает правильно:

 td {
  граница: 1 пиксель с точкой #999;
}

 
  
    Мы предлагаем:
    электронный телефон БЕСПЛАТНО
    Личное
    Профессиональная АТС
  
  
    Цены
    БЕСПЛАТНО
  3 фунта стерлингов в месяц
    От 5 фунтов стерлингов в месяц

Если это не работает для вас, вероятно, вы либо неправильно связали свой файл CSS, либо есть другое правило CSS, перекрывающее это. Попробуйте проверить элемент, чтобы увидеть.

Я хочу дать каждой ячейке в таблице границу.

Насколько я понимаю, вы хотите, чтобы граница ячейки выглядела так:

Вот скрипка того, что вы хотите.

Используйте следующий CSS:

 table.productsTable {
    ширина границы: 1px;
    интервал между границами: 2px;
    стиль границы: начало;
    цвет границы: серый;
    граница-коллапс: раздельная;
    цвет фона: белый;
}
table.productsTable тд {
    ширина границы: 1px;
    отступ: 1px;
    стиль границы: вставка;
    цвет границы: серый;
    цвет фона: белый;
    -moz-граница-радиус: ;
}

Надеюсь это поможет.

пишем так:

 .products td
{
    граница: 1px пунктирная #999999;
}

HTML

 <таблица>
 
  <тд>

Ниже код делает следующее: — 1. дает единую границу td 2. отдельная граница к таблице.

Окружающая среда:- Работает на ФФ 34.0.

Не пробовал для html6:- Чтобы запустить его с помощью html6, попробуйте, например, html:x. html:head, html:title и т. д.

<голова> <скрипт> Добро пожаловать в джунгли <стиль> .table_main { бордюр-верхний стиль: ребро; граница-нижний стиль: ребро; левый бордюр: ребро; граница справа: ребро; цвет границы: красный; ширина границы: 3px; } .table_main тд { фон: #A38055; граница справа: сплошной 1px белый; нижняя граница: 1px сплошной белый; выравнивание текста: по центру; } .table_main { фон: #DCDCDC; граница справа: сплошной 1px белый; нижняя граница: 1px сплошной белый; выравнивание текста: по центру; }

<тело>

Добро пожаловать в джунгли

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Таблица

html — одиночный тд с рамкой CSS

спросил 5 лет, 1 месяц назад

Изменено 5 лет, 1 месяц назад

Просмотрено 2к раз

 таблица {
        граница коллапса: коллапс;
        поле: 100 пикселей авто;
    }
    
 тд {
        поле: 0px;
        отступ: 5px;
        выравнивание текста: по левому краю;
        граница: 1px сплошная #080808;
    }
    
.
  граница {
        граница: 1px сплошная #080808;
    }

    
.noborders тд {
        граница:0;
    }

      
.border_single {

        граница: 1px сплошная #080808;
    }

 <таблица>

Я пытаюсь понять, как CSS передает значения по иерархии таблиц. Я намеренно классифицировал td как «border_single», чтобы конкретно указать на него и применить базовую границу. Я не могу показать границу, я предполагаю, что она наследует стили от высоких уровней, поэтому граница для конкретного td не отображается?

css
html-таблица
граница

Ваша работа верна, вам просто нужно добавить тд в свой класс

 . border_single
{
   граница: 1px сплошная #080808;
}

к этому

 td.border_single
{
   граница: 1px сплошная #080808;
}

Даже если у вас есть td.no_borders , td.with_background и более, td.border_single все равно будет работать как указано, вы также можете использовать id #border_single или 9002 7 td#border_single

будет больше специфический.

Вы также можете использовать td:nth-child(n), td:first-child, td:last-child и получить тот же результат, без использования идентификатора или класса

 таблица {
        граница коллапса: коллапс;
        поле: 100 пикселей авто;
    }
    
 тд {
        поле: 0px;
        отступ: 5px;
        выравнивание текста: по левому краю;
        граница: 1px сплошная #080808;
    }
    
.граница {
        граница: 1px сплошная #080808;
    }

    
.noborders тд {
        граница:0;
    }

      
td.border_single {

        граница: 1px сплошная #080808;
    }
    
tr: n-й ребенок (5) > td: n-й ребенок (2)
    {
    граница: 1px сплошная #080808;
    }
tr:последний-дочерний > td:n-й-дочерний(2)
    {
    граница: 1px сплошная #080808;
    }

 <таблица>

Проблема

Специфичность важна в объявлении CSS.

Селекторы выигрывают в следующем порядке:

Важность (при использовании !важно )
Специфика
Исходный заказ

Подробнее здесь.

.no_borders td более конкретен, чем .border_single , поэтому в:

подберет стиль из .no_borders td вместо .border_single .

Решение

Одним из возможных решений является использование id вместо селектора класса , поскольку id более специфичен, чем

класс .

В этом случае используйте

THEad1	THEad2	THEad3
A	B	C
X	Y	Z
Зена	Йода	Зохан
Ячейка таблицы с границами	Ячейка таблицы с границами	Ячейка таблицы с границами
Ячейка таблицы без границ	Ячейка таблицы без границ	Ячейка таблицы без границ
Ячейка таблицы без границ	Таблица С границей	Ячейка таблицы без границ
Ячейка таблицы с границами	Ячейка таблицы с границами	Ячейка таблицы с границами
Ячейка таблицы без границ	Ячейка таблицы без границ	Ячейка таблицы без границ
Ячейка таблицы без границ	Таблица С границей	Ячейка таблицы без границ
Ячейка таблицы без границ	Ячейка таблицы без границ	Ячейка таблицы без границ
Ячейка таблицы без границ	С рамкой с использованием tr:nth-child(n) > td:nth-child(n)	Ячейка таблицы без границ
Ячейка таблицы без границ	Ячейка таблицы без границ	Ячейка таблицы без границ
Ячейка таблицы без границ	С рамкой, используя tr:last-child > td:nth-child(n)	Ячейка таблицы без границ
Ячейка таблицы без границ	Таблица С границей	Ячейка таблицы без границ
Таблица С границей	в файле HTML и измените `.border_single` на `#border_single` в файле CSS. Вы можете запустить приведенный ниже фрагмент, чтобы увидеть, как это работает. Навигация по записям Смета на создание сайта: «Сайт НН» создание сайтов Нижний Новгород Что означает знак в тексте: что означает этот знак?» — Яндекс Кью Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Рубрики Css Html Js Адаптивный сайт Верстка Идеи С чего начать Советы Шаблоны Разное © Компания Вебджем.рф 2009 - 2024 \| Все права защищены.

html — Применение границ ячеек таблицы

Добро пожаловать в джунгли

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

html — одиночный тд с рамкой CSS

Проблема

Решение

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

Рубрики