Html td border: Атрибут border | htmlbook.ru

Leave a Comment / Html / By /

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

спросил

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

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

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

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

HTML:

 

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


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

От 5 фунтов стерлингов в месяц
  • HTML
  • CSS

2

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

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

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

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

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

1

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

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

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

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

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

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

пишем так:

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

HTML 

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

4

Ниже код делает следующее: — 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
 Зарегистрируйтесь, используя электронную почту и пароль
 Опубликовать как гость 
 Электронная почта
 Обязательно, но не отображается
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 border-left-style — CSS: Каскадные таблицы стилей 
 Свойство CSS   border-left-style   задает стиль линии левой границы  элемента  .
  Примечание:  Спецификация не определяет, как границы разных стилей соединяются в углах.
 /* Значения ключевых слов */
стиль границы слева: нет;
левый стиль границы: скрытый;
граница слева: пунктирная;
стиль границы слева: пунктир;
стиль границы слева: сплошной;
левый бордюр: двойной;
левый бордюр: канавка;
левый бордюр: ребро;
стиль границы слева: вставка;
стиль границы слева: начало;
/* Глобальные значения */
пограничный левый стиль: наследовать;
левый стиль границы: начальный;
стиль границы слева: вернуться;
левый стиль границы: обратный слой;
стиль границы слева: не установлен;
 
  левый край  задается как одно ключевое слово, выбранное из доступных для свойства  в стиле рамки .

      
THEad1 THEad2 THEad3
     
 A B C 

        
 X Y Z 

        
 Зена Йода Зохан 

      
    
  

   
 Исходное значение  нет 
 Применяется ко всем элементам. Это также относится к 
 
 
 ::first-letter  .
 Унаследовано нет
 Расчетное значение как указано
 Тип анимации дискретный
 border-left-style = 
  
 "> = 
 нет | 
 скрытый | 
 пунктирный | 
 пунктирный | 
 сплошной | 
 двойной | 
 ребристый | 
 ребристый | 
 inset | 
 outset 
 
 Настройка левого стиля 
 HTML 
 
 CSS 
 /* Определить внешний вид таблицы */
Таблица {
 ширина границы: 2px;
 цвет фона: #52e385;
}
тр,
тд {
 отступ: 3px;
}
/* примеры классов в стиле border-left */
.
  
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *
 
 
  
  

 

  

    нет
    скрытый
    точечный
    пунктир
  

  

    твердый
    двойной
    канавка
    гребень
  

  

    вставка
    начало