Добавьте рамку-низ к строке таблицы <tr>

У меня есть таблица 3 на 3. Мне нужен способ добавить границу для нижней части каждой строки trи придать ей определенный цвет.

Сначала я попробовал прямой путь, а именно:

<tr style="border-bottom:1pt solid black;">

Но это не сработало. Поэтому я добавил CSS следующим образом:

tr {
border-bottom: 1pt solid black;
}

Это все еще не сработало.

Я бы предпочел использовать CSS, потому что тогда мне не нужно добавлять styleатрибут в каждую строку. Я не добавил borderатрибут в <table>. Я надеюсь, что это не влияет на мой CSS.

У меня была такая проблема раньше. Я не думаю, что trмогу принять стиль границы напрямую. Мой обходной путь должен был стилизоватьtd s в строке:

<tr class="border_bottom">

CSS:

tr.border_bottom td {
  border-bottom:1pt solid black;
}

Добавьте border-collapse:collapseк своей таблице правило:

table { 
    border-collapse: collapse; 
}

Ссылка на сайт

Используйте border-collapse:collapseна столе и border-bottom: 1pt solid black;на тра

использование

border-collapse:collapse как написал Натан и вам нужно установить

td { border-bottom: 1px solid #000; }

Здесь много неполных ответов. Поскольку вы не можете применить границу к trтегу, вам нужно применить его к тегам tdили thследующим образом:

td {
  border-bottom: 1pt solid black;
}

В результате между ними останется небольшое пространство td, что нежелательно, если вы хотите, чтобы граница выглядела так, как будто это trтег. Чтобы, так сказать, «заполнить пробелы», вам нужно использовать border-collapseсвойство tableэлемента и установить его значение collapseследующим образом:

table {
  border-collapse: collapse;
}

использование

table{border-collapse:collapse}
tr{border-top:thin solid}

Замените "тонкое твердое тело" на свойства CSS.

Показать строку в виде блока.

tr {
    display: block;
    border-bottom: 1px solid #000;
}

и отображать альтернативные цвета просто:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

Вы можете использовать box-shadowсвойство, чтобы подделать границу trэлемента. Отрегулируйте положение Y box-shadow(ниже обозначено как 2px), чтобы отрегулировать толщину.

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

Я пытался добавить

    table {
      border-collapse: collapse;
    }   

рядом с

    tr {
      bottom-border: 2pt solid #color;
    }

а затем прокомментировал коллапс границы, чтобы увидеть, что сработало. У меня просто работал tr селектор со свойством bottom-border!

Без границ CSS отл.

Нет границы Фото в прямом эфире

CSS Border ex.

Стол с бордюром в прямом эфире

При использовании этого метода я обнаружил, что пространство между элементами td вызывает разрыв на границе, но не стоит бояться ...

Один из способов обойти это:

<tr>
    <td>
        Example of normal table data
    </td>

    <td class="end" colspan="/* total number of columns in entire table*/">
        /* insert nothing in here */ 
    </td>
</tr>

С помощью CSS:

td.end{
    border:2px solid black;
}

<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 пикселя. В разделе стиля вы можете добавить

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

В коде таблицы либо

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>

Другое решение этой проблемы - это border-spacingсвойство:

table td {
  border-bottom: 2px solid black;
}

table {
  border-spacing: 0px;
}

<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

Отсутствует CSS-граница снизу:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

Вы не можете поставить границу для элемента tr. Это сработало для меня в Firefox и IE 11:

<td style='border-bottom:1pt solid black'>

HTML

<tr class="bottom-border">
</tr>

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}