У меня есть таблица 3 на 3. Мне нужен способ добавить границу для нижней части каждой строки tr
и придать ей определенный цвет.
Сначала я попробовал прямой путь, а именно:
<tr style="border-bottom:1pt solid black;">
Но это не сработало. Поэтому я добавил CSS следующим образом:
tr {
border-bottom: 1pt solid black;
}
Это все еще не сработало.
Я бы предпочел использовать CSS, потому что тогда мне не нужно добавлять style
атрибут в каждую строку. Я не добавил border
атрибут в <table>
. Я надеюсь, что это не влияет на мой CSS.
html
css
html-table
Санграм Нандхиле
источник
источник
Ответы:
У меня была такая проблема раньше. Я не думаю, что
tr
могу принять стиль границы напрямую. Мой обходной путь должен был стилизоватьtd
s в строке:CSS:
источник
cellspacing="0"
в качестве атрибута<table>
(см. Этот вопрос ). Не знаю, как это будет выглядеть с пунктирными или пунктирными границами.tr
можно использовать моделирование границ в модели свертывания границ. @ Санграм, подумай о том, чтобы принять ответ, который учитывает это, а не этот, нет?Добавьте
border-collapse:collapse
к своей таблице правило:Ссылка на сайт
источник
Используйте
border-collapse:collapse
на столе иborder-bottom: 1pt solid black;
на траисточник
tr
рухнул.использование
border-collapse:collapse
как написал Натан и вам нужно установитьtd { border-bottom: 1px solid #000; }
источник
Здесь много неполных ответов. Поскольку вы не можете применить границу к
tr
тегу, вам нужно применить его к тегамtd
илиth
следующим образом:В результате между ними останется небольшое пространство
td
, что нежелательно, если вы хотите, чтобы граница выглядела так, как будто этоtr
тег. Чтобы, так сказать, «заполнить пробелы», вам нужно использоватьborder-collapse
свойствоtable
элемента и установить его значениеcollapse
следующим образом:источник
использование
Замените "тонкое твердое тело" на свойства CSS.
источник
Показать строку в виде блока.
и отображать альтернативные цвета просто:
источник
display: block
дляtr
s. Используйтеtr td { border-bottom: ... }
объявлениеtr.oddrow td { border-bottom: ... }
вместоВы можете использовать
box-shadow
свойство, чтобы подделать границуtr
элемента. Отрегулируйте положение Ybox-shadow
(ниже обозначено как 2px), чтобы отрегулировать толщину.источник
Я пытался добавить
рядом с
а затем прокомментировал коллапс границы, чтобы увидеть, что сработало. У меня просто работал tr селектор со свойством bottom-border!
Без границ CSS отл.
Нет границы Фото в прямом эфире
CSS Border ex.
Стол с бордюром в прямом эфире
источник
При использовании этого метода я обнаружил, что пространство между элементами td вызывает разрыв на границе, но не стоит бояться ...
Один из способов обойти это:
С помощью CSS:
источник
<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">
Вы можете сделать то же самое для всего ряда.
Существует
border-bottom-style
,border-top-style
,border-left-style
,border-right-style
. Или простоborder-style
это относится ко всем четырем границам одновременно.Вы можете увидеть (и ПОПРОБУЙТЕ СЕБЯ онлайн) более подробную информацию здесь
источник
Несколько интересных ответов. Так как вы просто хотите, чтобы граница снизу (или сверху), вот еще два. Предполагая, что вы хотите синюю рамку толщиной 3 пикселя. В разделе стиля вы можете добавить
В коде таблицы либо
источник
Другое решение этой проблемы - это
border-spacing
свойство:источник
Отсутствует CSS-граница снизу:
источник
Вы не можете поставить границу для элемента tr. Это сработало для меня в Firefox и IE 11:
источник
HTML
CSS
источник