Td css border: CSS Table Size (Width and Height)

Leave a Comment / Css / By /

Как раскрасить все 4 стороны границы ячейки TD с помощью CSS в таблице HTML?

спросил

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

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

У меня есть этот код, в котором я пытаюсь окрасить все 4 стороны ячейки TD красным цветом, но если вы запустите код, только нижняя и правая границы приобретут цвет (в Mozilla Firefox). Есть ли способ покрасить все 4 границы?

 # таблица selection_table {
  граница коллапса: коллапс;
}

#selections_table тд,
й {
  граница: 1px сплошной черный;
  отступ: 3px 4px 3px 4px;
} 
 <дел>
  <таблица>
    
      
        <й>#
        Модель
      
      
        <тд>1
        XXX-8

Этот вопрос/ответ не помогает: CSS Border объявляет 4 стороны, цвет, ширину в одной строке

Если есть способ стилизовать его через класс, это будет лучше, чем использование встроенной команды стилей.

  • HTML
  • CSS
1

Измените встроенный стиль на style="border:1px double red;" :

 <дел>
  <таблица>
    
      
        <й>#
        Модель
      
      
        <тд>1
        XXX-8

Маленький трюк, создайте ::after для td, к которому вы хотите добавить границу.

 таблица #selections_table {
 граница коллапса: коллапс;
}

#selections_table тд,
 й {
  граница: 1px сплошной черный;
  отступ: 3px 4px 3px 4px;
  должность: родственница;
}
#selections_table td.border-red::after{
  содержание: "";
  положение: абсолютное;
  сверху: -1px;
  слева: -1px;
  справа: -1px;
  внизу: -1px;
  граница: 1px сплошной красный;
} 
 <дел>
  <таблица>
    
      
        <й>#
        Модель
      
      
        <тд>1
        XXX-8

https://jsfiddle. net/ym82a0k7/

 

<голова>
<стиль>
стол, т, тд {
  граница: 1px сплошной красный;
}


<тело>
<дел>
  <таблица>
    
      
        <й>#
        Модель
      
      
        <тд>1
        XXX-8
0

Во-первых, вам не нужно объявлять td здесь:

 #selections_table td,th {
    граница: 1px сплошной черный;
    отступ: 3px 4px 3px 4px;
}

Итак,

 #selections_table th {
    граница: 1px сплошной черный;
    нижняя граница: 1 пиксель сплошной красный;
    отступ: 3px 4px 3px 4px;
}
тд {
    граница: 1px сплошной красный;
}

Это еще один вариант (увеличивая пиксель, это не очень хорошая практика, а еще один вариант)

 #selections_table {
    граница: 1px сплошной черный;
    отступ: 3px 4px 3px 4px;
}
тд {
    граница: 2 пикселя сплошного красного цвета;
}

или вот так:

 #selections_table th {
    граница: 1px сплошной черный;
    отступ: 3px 4px 3px 4px;
}
тд {
    граница: 1px двойной красный;
}

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

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

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

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

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

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

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

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

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

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

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Как скрыть границу ячейки? — HTML и CSS — Форумы SitePoint

amy_damnit 1

У меня есть таблица с объединенными строками, но также и с обычными неслитными строками/ячейками.

Я установил этот стиль…

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

для простоты.

Как указать CSS «стереть» внутренние границы блока из 3 объединенных строк, чтобы осталась только внешняя граница?

Я пытался…

    граница: 0px сплошная #808080;

, но это не сработало.

Эми

РайанРиз 2

border-collapse:collapse;

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 сплошная #808080;}
тд {граница: 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 сплошная #808080;}
тд {граница: 0;}

Ральф,

Да, я уже знал это, но все равно спасибо за предложение.

Эми

P.S. Однако вам не нужна часть «td {border: 0;}».

РайанРиз

18 сентября 2009 г., 16:14 8

amy_damnit:

Райан,
Это не сработает.

…

Если я правильно помню, все «border-collapse:collapse;» делает, чтобы свернуть границы в единую границу, когда это возможно.

Эми

Я исходил из предположения, что между ячейками установлена ​​граница только в 1 пиксель, поэтому я предложил свернуть границы. Извините за это

amy_damnit 9

РайанРиз:

Я исходил из предположения, что между ячейками установлена ​​граница только в 1 пиксель, поэтому я предложил свернуть границы. Извините за это

Нет проблем.

Это недостаток, когда мы застряли на текстовом общении!

Через несколько дней у меня должна быть учетная запись веб-хостинга, и тогда я смогу публиковать красивые картинки/скриншоты/реальные веб-страницы, чтобы вы могли видеть, когда я буду задавать вопросы, что должно очень помочь!

Спасибо,

Эми

РайанРиз 10

amy_damnit:

Нет проблем.

Это недостаток, когда мы застряли на текстовом общении!

Через несколько дней у меня должна быть учетная запись веб-хостинга, и тогда я смогу публиковать красивые картинки/скриншоты/реальные веб-страницы, чтобы вы могли видеть, когда я буду задавать вопросы, что должно очень помочь!

Спасибо,

Эми

Скриншоты можно загружать на flickr или photobucket :).