it-swarm.com.ru

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

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

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

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

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

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

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

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

308
Sangram Nandkhile

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

<tr class="border_bottom">

CSS:

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

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

table { 
    border-collapse: collapse; 
}

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

432
Nathan Manousos

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

61
Jpduro

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

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

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

30
simoncereska

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

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

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

table {
  border-collapse: collapse;
}
22
dmeyer

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

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

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

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

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

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

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

7
Jesse

При использовании этого метода я обнаружил, что пространство между элементами 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;
}
2
DaveTheRave

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

    table {
      border-collapse: collapse;
    }   

рядом с

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

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

Нет границы CSS отл.

No Border CSS ex.

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

No Border Photo live

CSS Border ex.

CSS Border ex.

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

Table with Border photo live

1
MUFN

<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, который применяется ко всем четырем границам одновременно.

Вы можете увидеть (и ПОПРОБУЙТЕ СЕБЯ онлайн) более подробную информацию здесь

1
David Silva-Barrera

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

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

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

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>
0
Gil Perez

Другое решение для этого - border-spacing свойство:

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

table {
  border-spacing: 0px;
}
<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

0
Eugen Konkov

Вы можете использовать свойство 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);
}
0
Ian Bruce